更新答案

Question

我正在使用Bootstrap 3并尝试设置以下手风琴/折叠结构：

Onload：组中的每个手风琴组都完全折叠，并按照记录/预期的方式运行。
按钮点击：每个折叠面板都会展开，单击切换无效（包括网址锚点效果）。
点击另一个按钮：所有面板返回onload状态;全部折叠并可正常点击。

我已经进入第2步，但是当我在第3步再次单击该按钮时，它没有任何效果。我还看到Chrome Dev Tools中没有报告控制台错误，也没有通过本地JSHint运行代码。

每次单击按钮时，我都希望此循环可重复。

我在此处设置了我的代码http://bootply.com/98140和http://jsfiddle.net/A9vCx/

我很想知道我做错了什么，我很感激建议。谢谢！

我的HTML：

<button class="collapse-init">Click to disable accordion behavior</button>
<br><br>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

我的JS：

$(function() {

  var $active = true;

  $('.panel-title > a').click(function(e) {
    e.preventDefault();
  });

  $('.collapse-init').on('click', function() {
    if(!$active) {
      $active = true;
      $('.panel-title > a').attr('data-toggle', 'collapse');
      $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
      $(this).html('Click to disable accordion behavior');
    } else {
      $active = false;
      $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
      $('.panel-title > a').removeAttr('data-toggle');
      $(this).html('Click to enable accordion behavior');
    }
  });

});

Answer 1

更新答案

尝试打开折叠控件的多个面板，这些面板设置为手风琴，即data-parent属性设置，可能会出现问题和错误（请参阅multiple panels open after programmatically opening a panel上的此问题）

相反，最好的方法是：

允许每个面板单独切换
然后，在适当的时候手动执行手风琴行为。

要允许每个面板单独切换，请在data-toggle="collapse"元素上将data-target属性设置为.collapse面板ID选择器（而不是设置data-parent属性为父控件。您可以在问题Modify Twitter Bootstrap collapse plugin to keep accordions open中详细了解这一点。

粗略地说，每个小组应该如下所示：

<div class="panel panel-default">
   <div class="panel-heading">
         <h4 class="panel-title"
             data-toggle="collapse" 
             data-target="#collapseOne">
             Collapsible Group Item #1
         </h4>
    </div>
    <div id="collapseOne" 
         class="panel-collapse collapse">
        <div class="panel-body"></div>
    </div>
</div>

要手动强制执行手风琴行为，您可以为展示任何面板之前发生的折叠展示事件创建处理程序。使用此选项可确保在显示所选的其中之前关闭任何其他打开的面板（请参阅此answer to multiple panels open）。您还只希望在面板处于活动状态时执行代码。要做到这一切，请添加以下代码：

$('#accordion').on('show.bs.collapse', function () {
    if (active) $('#accordion .in').collapse('hide');
});

然后使用show和hide来切换每个面板和data-toggle的可见性，以启用和禁用控件。

$('#collapse-init').click(function () {
    if (active) {
        active = false;
        $('.panel-collapse').collapse('show');
        $('.panel-title').attr('data-toggle', '');
        $(this).text('Enable accordion behavior');
    } else {
        active = true;
        $('.panel-collapse').collapse('hide');
        $('.panel-title').attr('data-toggle', 'collapse');
        $(this).text('Disable accordion behavior');
    }
});

Working demo in jsFiddle

Answer 2

无论出于何种原因$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});似乎只是第一次工作，它只能扩展可折叠。（我试图从扩展的可折叠开始，它不会崩溃。）

这可能只是在您第一次使用这些参数初始化折叠时运行的内容。

使用show和hide方法可以获得更多运气。

以下是一个例子：

$(function() {

  var $active = true;

  $('.panel-title > a').click(function(e) {
    e.preventDefault();
  });

  $('.collapse-init').on('click', function() {
    if(!$active) {
      $active = true;
      $('.panel-title > a').attr('data-toggle', 'collapse');
      $('.panel-collapse').collapse('hide');
      $(this).html('Click to disable accordion behavior');
    } else {
      $active = false;
      $('.panel-collapse').collapse('show');
      $('.panel-title > a').attr('data-toggle','');
      $(this).html('Click to enable accordion behavior');
    }
  });

});

http://bootply.com/98201

<强>更新

授予 KyleMit 似乎有更好的处理方式，然后我。他对他的回答和理解印象深刻。

我不明白发生了什么或为什么show似乎在某些地方切换。

但是经过一段时间的混乱......最后得到了以下解决方案：

$(function() {
  var transition = false;
  var $active = true;

  $('.panel-title > a').click(function(e) {
    e.preventDefault();
  });

  $('#accordion').on('show.bs.collapse',function(){
    if($active){
        $('#accordion .in').collapse('hide');
    }
  });

  $('#accordion').on('hidden.bs.collapse',function(){
    if(transition){
        transition = false;
        $('.panel-collapse').collapse('show');
    }
  });

  $('.collapse-init').on('click', function() {
    $('.collapse-init').prop('disabled','true');
    if(!$active) {
      $active = true;
      $('.panel-title > a').attr('data-toggle', 'collapse');
      $('.panel-collapse').collapse('hide');
      $(this).html('Click to disable accordion behavior');
    } else {
      $active = false;
      if($('.panel-collapse.in').length){
        transition = true;
        $('.panel-collapse.in').collapse('hide');       
      }
      else{
        $('.panel-collapse').collapse('show');
      }
      $('.panel-title > a').attr('data-toggle','');
      $(this).html('Click to enable accordion behavior');
    }
    setTimeout(function(){
        $('.collapse-init').prop('disabled','');
    },800);
  });
});

http://bootply.com/98239

Answer 3

为了在想要同时使用'hide'和'show'等函数时保持手风琴的性质不变，你必须使用.collapse( 'hide' )之前的对象中的父属性设置初始化可折叠面板打电话给'隐藏'或'显示'

toggle: false

Answer 4

最佳且经过测试的解决方案是放置以下小片段，它会折叠您在加载时已打开的折叠式选项卡。在我的情况下，最后一个第六个选项卡是打开的，所以我在页面加载时折叠。

 $(document).ready(){
      $('#collapseSix').collapse("hide");
 }

Bootstrap 3折叠手风琴：折叠所有作品，但在保持数据父级的同时无法展开

4 个答案:

更新答案

Working demo in jsFiddle