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

Question

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

1. Onload:组中的每个手风琴面板都完全折叠,并按照记录/预期运行.

2. 按钮单击:每个折叠面板展开并单击切换无效(包括URL锚点效果).

3. 另一个按钮点击:所有面板返回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设置属性)可能会出现问题和错误(在编程打开面板后打开多个面板上的此问题)

相反,最好的方法是:

1. 允许每个面板单独切换
2. 然后,在适当的时候手动强制执行手风琴行为.

要允许每个面板单独切换,请在data-toggle="collapse"元素上将data-target属性设置为.collapse面板ID选择器(而不是将data-parent属性设置为父控件.您可以在修改Twitter Bootstrap折叠插件的问题中阅读更多相关内容以保持手风琴打开.

粗略地说,每个面板应如下所示:

<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>

要手动强制执行折叠行为,您可以为折叠显示事件创建一个处理程序,该事件在任何面板显示之前发生.使用此选项可确保在显示所选的一个打开的面板之前关闭所有其他打开的面板(请参阅打开多个面板的此答案).您还只希望在面板处于活动状态时执行代码.要做到这一切,请添加以下代码:

$('#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');
    }
});

在jsFiddle中工作演示