引导手风琴不会自动折叠其他打开的标签

Question

我正在尝试在一个项目中实现引导手风琴折叠，但自动折叠部分遇到了问题。假设有 3 个 div：A、B 和 C。如果 A 打开并且我单击 B，A 应该会自动折叠，但它不会。我只想同时打开一个部分。

我已经多次检查了我的代码，还有一些教程和其他问题，但仍然无法正常工作。任何帮助将不胜感激。

这里是小提琴，虽然动画因为它与引导程序链接而不起作用。但至少你们可以看到代码：https://jsfiddle.net/3ap18Lda/1/

    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


    <!-- accordion -->

<div class="container">
  <div id="accordion" role="tablist" aria-multiselectable="true">


    <div class="row caracteristicas-table">
      <div class="col-sm-12">
        <div role="tab" id="headingOne">

          <h3 class="dark-grey">HERE GOES THE TITLE</h3>

          <span class="orange-line"></span>

           <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum pharetra ligula, non varius diam feugiat dignissim. Cras tellus quam, facilisis eget imperdiet eu, fermentum non justo. </h4>


            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              <i class="down-arrow"><img src="images/down-arrow.svg"></i><h4 class="text-quero-mais">I want to know some more</h4>
            </a>

        </div> <!-- / tab -->   

        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <h4>Mauris vel ante eu tortor vulputate congue eu eget nibh. Suspendisse malesuada vehicula felis, vel sodales diam interdum eu. Etiam eu ante egestas, elementum nulla nec, gravida felis.</h4>
        </div>  <!-- / collaspeOne -->


      </div><!-- / col --> 
    </div> <!-- / row -->





    <div class="row caracteristicas-table">
      <div class="col-sm-12">
        <div role="tab" id="headingTwo">

          <h3 class="dark-grey">HERE GOES THE TITLE</h3>

          <span class="orange-line"></span>

           <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum pharetra ligula, non varius diam feugiat dignissim. Cras tellus quam, facilisis eget imperdiet eu, fermentum non justo.</h4>


            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              <i class="down-arrow"><img src="images/down-arrow.svg"></i><h4 class="text-quero-mais">I want to know some more</h4>
            </a>

        </div> <!-- / tab -->   

        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <h4>Mauris vel ante eu tortor vulputate congue eu eget nibh. Suspendisse malesuada vehicula felis, vel sodales diam interdum eu. Etiam eu ante egestas, elementum nulla nec, gravida felis.</h4>
        </div>  <!-- / collaspeTwo -->


      </div><!-- / col --> 
    </div> <!-- / row -->




    <div class="row caracteristicas-table">
      <div class="col-sm-12">
        <div role="tab" id="headingThree">

          <h3 class="dark-grey">HERE GOES THE TITLE</h3>

          <span class="orange-line"></span>

           <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum pharetra ligula, non varius diam feugiat dignissim. Cras tellus quam, facilisis eget imperdiet eu, fermentum non justo. </h4>


            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              <i class="down-arrow"><img src="images/down-arrow.svg"></i><h4 class="text-quero-mais">I want to know some more</h4>
            </a>

        </div> <!-- / tab -->   

        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          <h4>Mauris vel ante eu tortor vulputate congue eu eget nibh. Suspendisse malesuada vehicula felis, vel sodales diam interdum eu. Etiam eu ante egestas, elementum nulla nec, gravida felis.</h4>
        </div>  <!-- / collaspeThree -->


      </div><!-- / col --> 
    </div> <!-- / row -->


  </div> <!-- / accordion --> 
</div> <!-- / container -->

谢谢！

Answer 1

您没有加载引导程序，也没有加载 jQuery，

您需要同时加载它们才能使其正常工作。 我只是添加了指向您的小提琴的链接，它可以工作。

<script src='jquery.js'/>
<script src='bootstrap.js'/>

在我了解真正的问题后：

这让我很头疼。 我弄清楚出了什么问题：

• 您缺少“面板”类，您需要将其添加到每个部分
• 此处描述的某种选项卡存在错误 - https://github.com/openam/bootstrap-responsive-tabs/issues/45

我已在 this fiddle 中修复它，方法是向每个 div 添加面板类并添加此脚本：

$('.panel-collapse').on('show.bs.collapse', function (e) {
        $(e.target).closest('.panel').siblings().find('.panel-collapse').collapse('hide');
    });