मैं एक नौसिखिया हूँ और मदद की ज़रूरत है। मैंने बटन पर क्लिक करते समय जानकारी दिखाने के लिए बूटस्ट्रैप 4 "कार्ड डेक" को "पतन" के साथ जोड़ा। मेरी योजना थी, एक समय में केवल एक सामग्री दिखाने के लिए, इसलिए यदि मैं दूसरे बटन पर क्लिक करता हूं, तो यह सामग्री को बदल देना चाहिए। दुर्भाग्य से, जब मैं किसी अन्य बटन पर क्लिक करता हूं, तो बटन की संक्षिप्त सामग्री छिपी नहीं होती है, बल्कि इसके बजाय नीचे जोड़ दी जाती है। कृपया मुझे इसे ठीक करने का तरीका दिखाएं।

<section id="services-cards" class="section-bg">
        <div class="container">
            <div class="card-deck">
                <div class="card">
                    <img class="card-img-top" src="img/icons/cleaning_icon.svg" alt="Professionelle Zahnreinigung">
                    <div class="card-body" id="bodyOne">
                        <h5 class="card-title">Professionelle Zahnreinigung</h5>
                        <a class="btn btn-primary" data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="false" aria-controls="collapseOne">Preis & Info</a>
                    </div>
                </div>

                <div class="card">
                    <img class="card-img-top" src="img/icons/filling_icon.svg" alt="Zahnfüllung">
                    <div class="card-body">
                        <h5 class="card-title">Zahnfüllung</h5>
                        <a class="btn btn-primary" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">Preis & Info</a>
                    </div>
                </div> 

                <div class="card">
                        <img class="card-img-top" src="img/icons/whitening_icon.svg" alt="Zahnaufhellung">
                        <div class="card-body">
                            <h5 class="card-title">Zahnaufhellung</h5>
                            <a class="btn btn-primary" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">Preis & Info</a>
                        </div>
                    </div> 
            </div>

            <div class="collapse" id="collapseOne">
                <div class="card card-body">
                    <p>Die professionelle Zahnreinigung ist ein wichtiger Beitrag zur Zahnerhaltung, denn selbst regelmäßiges und gründliches Zähneputzen reicht meist nicht aus. 
                        Durch das Entfernen der Zahnbeläge und Zahnstein, wird bakteriell bedingten Erkrankungen wie Karies oder Parodonthose vorgebeugt.</p> 
                    <p>Standardmäßig verwenden wir dabei Scaler, Küretten und Ultraschallgeräte. 
                        Bei starken Verschmutzungen, oder auf Wunsch kommt bei uns auch ein Pulverstrahlgerät (Airflow) zum Einsatz.</p>
                    <h6>900 - 1.500,- THB</h6>                        
                </div>
            </div>

            <div class="collapse" id="collapseTwo">
                <div class="card card-body">
                    <p>Mit einer Zahnfüllungen können verschieden Defekte an den Zähnen repariert werden. 
                        Neben Karies oder einem abgebrochenen Stück Zahn werden immer häufiger auch Erosionen durch das Putzen oder durch Säuren, mit Füllungen versorgt.</p>
                    <p>Wir verwenden dafür ausschließlich zahnfarbene Kunststofffüllunegn (Composite), welche in den kaputten Zahn eingebracht und mit einem speziellen Licht ausgehärtet werden.</p>
                    <h6>1.200,- THB</h6>
                </div>
            </div>

            <div class="collapse" id="collapseThree">
                <div class="card card-body">
                    <p>Unter dem Bleaching oder dem Aufhellen von Zähnen versteht man entweder die Wiederherstellung oder die Aufhellung der natürlichen Zahnfarbe, 
                        mithilfe von Bleichungsmitteln.</p>
                    <p>Nach einer vorangegangenen, professionellen Zahnreinigung wird das Zahnfleisch mit einem Silikon abgedeckt und das Bleichmittel (Wasserstoffperoxid) 
                        auf den Zahn aufgetragen. Um die Behandlung zu beschleunigen, diese dabei aber so schmerzfrei wie möglich zu gestalten, verwenden wir eine spezielle Halogenlampe.</p>                 
                    <h6>5.900,- THB</h6>
                </div>
            </div>            
        </div>      
    </section> 
0
teamoh 16 फरवरी 2019, 11:25

2 जवाब

सबसे बढ़िया उत्तर

बस data-parent विशेषता का उपयोग करना:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="accordion">
  <section id="services-cards" class="section-bg">
    <div class="container">
      <div class="card-deck">
        <div class="card">
          <img class="card-img-top" src="img/icons/cleaning_icon.svg" alt="Professionelle Zahnreinigung">
          <div class="card-body" id="bodyOne">
            <h5 class="card-title">Professionelle Zahnreinigung</h5>
            <a class="btn btn-primary" data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="false" aria-controls="collapseOne">Preis & Info</a>
          </div>
        </div>

        <div class="card">
          <img class="card-img-top" src="img/icons/filling_icon.svg" alt="Zahnfüllung">
          <div class="card-body">
            <h5 class="card-title">Zahnfüllung</h5>
            <a class="btn btn-primary" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">Preis & Info</a>
          </div>
        </div>

        <div class="card">
          <img class="card-img-top" src="img/icons/whitening_icon.svg" alt="Zahnaufhellung">
          <div class="card-body">
            <h5 class="card-title">Zahnaufhellung</h5>
            <a class="btn btn-primary" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">Preis & Info</a>
          </div>
        </div>
      </div>

      <div class="collapse multi-collapse" id="collapseOne" data-parent="#accordion">
        <div class="card card-body">
          <p>Die professionelle Zahnreinigung ist ein wichtiger Beitrag zur Zahnerhaltung, denn selbst regelmäßiges und gründliches Zähneputzen reicht meist nicht aus. Durch das Entfernen der Zahnbeläge und Zahnstein, wird bakteriell bedingten Erkrankungen
            wie Karies oder Parodonthose vorgebeugt.</p>
          <p>Standardmäßig verwenden wir dabei Scaler, Küretten und Ultraschallgeräte. Bei starken Verschmutzungen, oder auf Wunsch kommt bei uns auch ein Pulverstrahlgerät (Airflow) zum Einsatz.</p>
          <h6>900 - 1.500,- THB</h6>
        </div>
      </div>

      <div class="collapse" id="collapseTwo" data-parent="#accordion">
        <div class="card card-body">
          <p>Mit einer Zahnfüllungen können verschieden Defekte an den Zähnen repariert werden. Neben Karies oder einem abgebrochenen Stück Zahn werden immer häufiger auch Erosionen durch das Putzen oder durch Säuren, mit Füllungen versorgt.</p>
          <p>Wir verwenden dafür ausschließlich zahnfarbene Kunststofffüllunegn (Composite), welche in den kaputten Zahn eingebracht und mit einem speziellen Licht ausgehärtet werden.</p>
          <h6>1.200,- THB</h6>
        </div>
      </div>

      <div class="collapse" id="collapseThree" data-parent="#accordion">
        <div class="card card-body">
          <p>Unter dem Bleaching oder dem Aufhellen von Zähnen versteht man entweder die Wiederherstellung oder die Aufhellung der natürlichen Zahnfarbe, mithilfe von Bleichungsmitteln.</p>
          <p>Nach einer vorangegangenen, professionellen Zahnreinigung wird das Zahnfleisch mit einem Silikon abgedeckt und das Bleichmittel (Wasserstoffperoxid) auf den Zahn aufgetragen. Um die Behandlung zu beschleunigen, diese dabei aber so schmerzfrei
            wie möglich zu gestalten, verwenden wir eine spezielle Halogenlampe.</p>
          <h6>5.900,- THB</h6>
        </div>
      </div>
    </div>
  </section>
</div>
1
Penny Liu 17 फरवरी 2019, 13:39

मेरा मानना ​​​​है कि बूटस्ट्रैप बॉक्स के बाहर इसका समर्थन नहीं करता है। आप इसे एक छोटे से जावास्क्रिप्ट के साथ पूरा कर सकते हैं:

$('.btn-primary').on('click', function() {
  $('.collapse').collapse('hide');
});

मैंने यह काम करने के लिए एक fiddle बनाया है।

-1
RobbeVP 16 फरवरी 2019, 15:29