如何一次打开所有 Bootstrap 手风琴标签

Posted

技术标签:

【中文标题】如何一次打开所有 Bootstrap 手风琴标签【英文标题】：How to open all Bootstrap accordion tabs at once 【发布时间】：2018-06-15 01:48:56 【问题描述】：

我有以下手风琴，并希望允许用户使用 jQuery 单击按钮来展开所有手风琴选项卡。

我尝试过使用这种方法 (https://codepen.io/dikuw/pen/KgzvJp)，但手风琴位于 Kendo 自定义编辑模板弹出窗口中，它不会展开所有面板，而是切换第一个和第二个面板的打开。

<div class="panel-group" id="accordion-demo" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" class="panel-title" data-toggle="collapse" data-parent="#accordion-demo" href="#prerequisites" aria-expanded="true" aria-controls="prerequisites">
                                Collapsible Group Item #1
                            </a>
                        </h4>
                    </div>
                    <div id="prerequisites" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="prerequisites">
                        <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed panel-title" role="button" data-toggle="collapse" data-parent="#accordion-demo" href="#addwizard" aria-expanded="false" aria-controls="addwizard">
                                Collapsible Group Item #2
                            </a>
                        </h4>
                    </div>
                    <div id="addwizard" class="panel-collapse collapse" role="tabpanel" aria-labelledby="addwizard">
                        <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed panel-title" role="button" data-toggle="collapse" data-parent="#accordion-demo" href="#adjusthtml" aria-expanded="false" aria-controls="adjusthtml">
                                Collapsible Group Item #3
                            </a>
                        </h4>
                    </div>
                    <div id="adjusthtml" class="panel-collapse collapse" role="tabpanel" aria-labelledby="adjusthtml">
                        <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

【问题讨论】：

你在用 angularjs 吗？因为你提到的例子是在 angularjs 中。 我不这么认为。我想要做的就是展开用户单击按钮时不可见的面板。我很困惑为什么这不起作用： $('.panel-collapse:not(".in")') .collapse('show'); 【参考方案1】：

这在引导程序 5 中对我有用

$(".closeall").click(function () 
    $(".collapse").removeClass("show");
);
$(".openall").click(function () 
    $(".collapse").addClass("show");
);

【讨论】：

【参考方案2】： 

$('.closeall').click(function () 
          $('.collapse').collapse('hide');
);


  $('.openall').click(function () 
        $('.collapse').collapse('show');
  );
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <a class="btn btn-primary openall" href="#">open all</a> <a class="btn btn-danger closeall" href="#">close all</a>
<hr>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        #1 Expanded
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
          #2 Expanded
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
         #3 Expanded
      </div>
    </div>
  </div>
</div>

【讨论】：

这在您的代码 sn-p 中不起作用。如果您打开 #2 并单击全部展开，它会关闭 #2 并打开 #1 这很好用！但是，您应该在点击事件上使用event.preventDefault()。【参考方案3】： 
<div>
    <div class="container">
        <a class="btn btn-default openall" href="#">open all</a> <a class="btn btn-default closeall" href="#">close all</a>
        <hr>
       <div class="panel-group" id="accordion-demo" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" class="panel-title" data-toggle="collapse" data-parent="#accordion-demo" href="#prerequisites" aria-expanded="true" aria-controls="prerequisites">
                                Collapsible Group Item #1
                            </a>
                        </h4>
                    </div>
                    <div id="prerequisites" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="prerequisites">
                        <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed panel-title" role="button" data-toggle="collapse" data-parent="#accordion-demo" href="#addwizard" aria-expanded="false" aria-controls="addwizard">
                                Collapsible Group Item #2
                            </a>
                        </h4>
                    </div>
                    <div id="addwizard" class="panel-collapse collapse" role="tabpanel" aria-labelledby="addwizard">
                        <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed panel-title" role="button" data-toggle="collapse" data-parent="#accordion-demo" href="#adjusthtml" aria-expanded="false" aria-controls="adjusthtml">
                                Collapsible Group Item #3
                            </a>
                        </h4>
                    </div>
                    <div id="adjusthtml" class="panel-collapse collapse" role="tabpanel" aria-labelledby="adjusthtml">
                        <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
</div>

----javascript---代码

$('.closeall').click(function () 
        $('.panel-collapse.in')
          .collapse('hide');
    );
    $('.openall').click(function () 
        $('.panel-collapse:not(".in")')
          .collapse('show');
    );

这在你给的 codepen 中对我有用..

【讨论】：

它不起作用。如果您打开 #2 并单击全部展开，它会关闭 #2 并打开 #1

以上是关于如何一次打开所有 Bootstrap 手风琴标签的主要内容，如果未能解决你的问题，请参考以下文章

在页面刷新/导航时保留 Twitter Bootstrap 折叠状态

只打开一个手风琴面板 vue.js / bootstrap vue

Bootstrap 4：手风琴不会折叠卡片

保持多个折叠打开（使用按钮切换）– Bootstrap 3

手风琴组标题的样式（ngx-bootstrap）？

Bootstrap手风琴Javascript在另一张卡关闭时打开一张卡