为 Bootstrap 3 手风琴设置显示三角形答案

【问题标题】：Setting up disclosure triangles for Bootstrap 3 accordion为 Bootstrap 3 手风琴设置显示三角形
【发布时间】：2014-07-19 09:13:18
【问题描述】：

Bootstrap 3 手风琴控件似乎没有内置的 n 类切换按钮，用于在手风琴的标题上打开/关闭。

当它的子项打开时，我需要在标题上有一个带有一个 css 类的手风琴，而另一个则用于关闭它。我对下面的代码很接近，但这并不涵盖当用户关闭并已经打开窗格而不选择其他窗格时的情况——它只有在您继续选择不同的窗格时才能正常工作。

我需要标题正确显示状态的 3 件事：

当窗格设置为默认打开时（将“in”类添加到该窗格的 html 中）
手动打开或关闭时，显示正确的类
通过单击打开的其他窗格关闭时

到目前为止我有

    $(function() {
   $('h4.panel-title').each(function() {
        // check all headers to see if they have open children
        var isOpen = $(this).closest('.panel').find('.panel-collapse').hasClass('in');
        // and, if yes, set the class to "open"
        if (isOpen) {
            $(this).addClass('open');
        }
   });
   $('h4.panel-title').on('click', function(event) {
        // remove "open" class from all headers in this group
        $(this).closest('.accordion-group').find('h4.panel-title').removeClass('open');
        // then set the one clicked on to open
        $(this).addClass('open');
   });

有了这个 html：

<div class="panel-group accordion-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
              Collapsible Group Item #1
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body">
            text...
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo">
              Collapsible Group Item #2
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
          <div class="panel-body">
            text...
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree">
              Collapsible Group Item #3
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
          <div class="panel-body">
            text...
          </div>
        </div>
      </div>
    </div>

粘贴到 Fiddle 中并没有完全保存下来，但这里是：http://jsfiddle.net/smlombardi/kW33s/

【问题讨论】：

标签： javascript jquery css twitter-bootstrap accordion

【解决方案1】：

试试这个，

$(function() {    
   $('h4.panel-title').on('click', function(event) {
           // remove "open" class from all headers in this group
           $(this).closest('.accordion-group').find('h4.panel-title').removeClass('open');
           // remove "in" class from all collapse panel
           $(this).closest('.accordion-group').find('.collapse').removeClass("in");
           // then set the one clicked on to open
           $(this).addClass('open');
           $(this).parent().next(".collapse").addClass("in");
   });
});

JSFIDDLE

【讨论】：

这样更干净，但如果页面上有多个.accordion-group，它会关闭所有这些，对吧？
是的，更新了代码。现在它将针对当前的 .accordion-group。

【解决方案2】：

我找到了这个

Bootstrap 3 accordion styling on open/closed

我意识到挂接到 BS3 手风琴事件比挂接单击事件更好，因为我遇到的问题是窗格在单击时具有 IN 类，即使单击将要关闭它。

【讨论】：