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

我相信引导程序不支持此功能。您可以使用少量的javascript来完成此操作：

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

我制作了fiddle来显示此工作。

Bootstrap 4折叠的内容未隐藏

2 个答案: