Bootstrap 3折叠手风琴:折叠所有作品，但在保持数据父级的同时无法展开所有作品 [英] Bootstrap 3 collapse accordion: collapse all works but then cannot expand all while maintaining data-parent

问题描述

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

I'm using Bootstrap 3 and trying to setup the following accordion/collapse structure:

1. 载入中:一组中的每个手风琴面板都完全折叠起来，并按文档/预期的功能工作.

1. Onload: Each accordion panel in a group is fully collapsed and functions as documented/expected.

单击按钮:每个手风琴面板都将展开，并且单击切换开关无效(包括URL锚定效果).

Button click: Each accordion panel expands and clicking the toggles has no effect (including URL anchor effects).

另一个按钮单击:所有面板返回到加载状态；全部折叠并可以正常点击.

Another button click: All panels return to onload state; all collapsed and clickable as normal.

我已进入步骤2，但是当我在步骤3再次单击该按钮时，它没有任何作用.在Chrome开发工具中或通过本地JSHint运行代码，我也没有看到任何控制台错误报告.

I've made it to step 2, but when I click the button again at step 3 it has no effect. I also see no console errors reported in Chrome Dev Tools or by running the code through my local JSHint.

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

I'd like this cycle to be repeatable each time the button is clicked.

我已经在 http://bootply.com/98140 和此处http://jsfiddle.net/A9vCx/

我很想知道自己在做错什么，我很高兴提出建议.谢谢！

I'd love to know what I'm doing wrong and I appreciate suggestions. Thank you!

我的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');
    }
  });

});

推荐答案

更新后的答案

尝试打开设置为手风琴的折叠控件的多个面板，即设置了data-parent属性，这可能会带来很多问题和错误(请参见

Updated Answer

Trying to open multiple panels of a collapse control that is setup as an accordion i.e. with the data-parent attribute set, can prove quite problematic and buggy (see this question on multiple panels open after programmatically opening a panel)

相反，最好的方法是:

1. 允许每个面板单独切换
2. 然后，在适当的地方手动执行手风琴行为.

---

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

---

To allow each panel to toggle individually, on the data-toggle="collapse" element, set the data-target attribute to the .collapse panel ID selector (instead of setting the data-parent attribute to the parent control. You can read more about this in the question Modify Twitter Bootstrap collapse plugin to keep accordions open.

大致上，每个面板应如下所示:

Roughly, each panel should look like this:

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

---

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

---

To manually enforce the accordion behavior, you can create a handler for the collapse show event which occurs just before any panels are displayed. Use this to ensure any other open panels are closed before the selected one is shown (see this answer to multiple panels open). You'll also only want the code to execute when the panels are active. To do all that, add the following code:

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

---

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

---

Then use show and hide to toggle the visibility of each of the panels and data-toggle to enable and disable the controls.

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

这篇关于Bootstrap 3折叠手风琴:折叠所有作品，但在保持数据父级的同时无法展开所有作品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！