Question

我正在尝试在项目中实现bootstrap手风琴折叠，而我在使用自动折叠部件时遇到问题。假设有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

你没有加载bootstrap，也没有加载jQuery，

您需要加载它们才能使其正常工作。我只是简单地添加了你小提琴的链接，它确实有效。

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

在我理解了真正的问题之后：

对此我的理解。我弄清楚出了什么问题：

您缺少＆＃39;小组＆＃39; class，你需要将它添加到每个部分
此处所述的某些标签有一个错误 - https://github.com/openam/bootstrap-responsive-tabs/issues/45

我通过向每个div添加面板类并添加此脚本来修复它this fiddle：

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

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

1 个答案: