jquery - Bootstrap 3折叠 Accordion : collapse all works but then cannot expand all while maintaining data-parent

Question

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

1. 加载:组中的每个折叠面板均完全折叠并按记录/预期运行。

2. 按钮单击:每个 Accordion 面板都会展开，单击切换按钮没有任何效果(包括 URL anchor 效果)。

3. 再次点击按钮:所有面板返回onload状态；一切都像平常一样折叠并可点击。

我已经完成了步骤 2，但是当我在步骤 3 再次单击该按钮时，它没有任何效果。我在 Chrome 开发工具中或通过本地 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

更新答案

尝试打开设置为 Accordion 的折叠控件的多个面板，即设置了 data-parent 属性，可能会出现相当大的问题和错误(请参阅 multiple panels open after programmatically opening a panel 上的此问题)

相反，最好的方法是:

1. 允许每个面板单独切换
2. 然后，在适当的情况下手动强制执行 Accordion 行为。

<小时/>

要允许每个面板单独切换，请在 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" 
             <b>data-target="#collapseOne"></b>
             Collapsible Group Item #1
         </h4>
    </div>
    <div <b>id="collapseOne" </b>
         class="panel-collapse collapse">
        <div class="panel-body"></div>
    </div>
</div>

<小时/>

要手动强制执行 Accordion 行为，您可以为在显示任何面板之前发生的折叠显示事件创建一个处理程序。使用此选项可确保在显示所选面板之前关闭任何其他打开的面板(请参阅此 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;
        <b>$('.panel-collapse').collapse('show');
        $('.panel-title').attr('data-toggle', '');</b>
        $(this).text('Enable accordion behavior');
    } else {
        active = true;
        <b>$('.panel-collapse').collapse('hide');
        $('.panel-title').attr('data-toggle', 'collapse');</b>
        $(this).text('Disable accordion behavior');
    }
});

Working demo in jsFiddle