Bootstrap 4折叠的内容没有隐藏

Question

我是初学者，需要帮助。 我将 Bootstrap 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> 

Answer 1

只需使用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>

Answer 2

我相信 bootstrap 不支持这个开箱即用。 你可以用一点点javascript来完成这个：

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

我做了一个fiddle 来展示这个工作。