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

当面板打开时，还有一种方法可以将面板类从.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

以下代码会有所帮助。因此，单击您选择目标的父元素，该元素将是包含panel-default类的div标签，然后您只需切换panel-default和panel-primary类。

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/

Boostrap 3手风琴，带有人字形和条形颜色变化

1 个答案: