Bootstrap 3 手风琴与人字形和条形颜色变化

Question

基于完美适用于人字形 (Bootstrap 3 Collapse show state with Chevron icon) 的解决方案：

function toggleChevron(e) {
    $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);

当面板打开时，还有一种方法可以将面板 class 从 .panel-default 更改为 .panel-primary？

我有这个面板设置：

<div class="panel panel-default">
      <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse6">
        <h4 class="panel-title">
          <a class="accordion-toggle">PANEL TITLE</a><i class="indicator glyphicon glyphicon-chevron-right pull-right"></i>
        </h4>
      </div>            
    <div id="collapse6" class="panel-collapse collapse">
    <div class="panel-body">
    <fieldset>

    ...

    </fieldset>  
    </div>
  </div>
</div>

非常感谢。

Answer 1

以下代码会有所帮助。因此，单击 select 目标的父元素，即包含 panel-default class 的 div 标记，然后您只需切换 panel-default 和 panel-primary class是的。

function toggleChevron(e) {
$(e.target).parent().toggleClass('panel-default');
$(e.target).parent().toggleClass('panel-primary');
    $(e.target)
        .prev('.panel-heading')
        .find("i.indicator")
        .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);

link: http://jsfiddle.net/saa93/hpzj2z5a/1/

Bootstrap 3 手风琴与人字形和条形颜色变化

Boostrap 3 accordion with chevron and bar color change

twitter-bootstrap-3

bootstrap-accordion