javascript - 为 Bootstrap 3 Accordion 设置显示三 Angular 形

Question

令我非常沮丧的是，Bootstrap 3 Accordion 控件似乎没有用于在 Accordion 的标题 上打开/关闭的内置 n 类切换。

我需要一个 Accordion ，当它的 child 打开时，标题上有一个 css 类，另一个关闭。我接近以下代码，但这不包括用户关闭并打开 Pane 而不选择其他 Pane 的情况——只有当您继续选择不同的 Pane 时它才能正常工作。

我需要 header 正确显示状态的 3 件事:

• 当 Pane 设置为默认打开时(将“in”类添加到该 Pane 的 html)
• 手动打开或关闭时，显示正确的类
• 通过单击打开的不同 Pane 关闭时

我现在有

    $(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/

Answer 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