bootstrap 手风琴不会自动折叠其他打开的选项卡

Question

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

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

这是 fiddle，尽管动画因为与 bootstrap 链接而不起作用。但至少你们可以看到代码：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

您没有加载 bootstrap，也没有加载 jQuery、

您需要同时加载它们才能使其正常工作。我只是添加了指向您的 fiddle 的链接，它起作用了。

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

我理解真正的问题后：

我为此伤透了脑筋。我弄清楚出了什么问题：

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

我在 this fiddle 中修复了它，方法是将面板 class 添加到每个 div 并添加此脚本：

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

bootstrap 手风琴不会自动折叠其他打开的选项卡

bootstrap accordion not collapsing other open tabs automatically

css

collapse

twitter-bootstrap