关闭面板后重置引导面板标题

Question

我正在引导程序中创建一个手风琴。我将其设置为在单击打开我想要的面板时更改面板标题和字形图标。此外，当我单击另一个面板时，前一个面板将重置为关闭状态。

但是，我遇到的问题是，如果我单击打开后关闭的同一个面板，样式会显示为“打开”状态like so.

我可以做些什么来确保如果我单击一个关闭的面板，它会重置为关闭状态？下面是我正在使用的 JQuery 代码。

$('.panel-clr').click(function () {
    $(this).addClass('on');
    $(this).find('span').removeClass('glyphicon-chevron-right');
    $(this).find('span').addClass('glyphicon-chevron-down');
});

$('.panel-clr').click(function () {
    $('.panel-clr').not(this).removeClass('on');    
    $('.panel-clr').not(this).find('span').removeClass('glyphicon-chevron-down');
    $('.panel-clr').not(this).find('span').addClass('glyphicon-chevron-right');
});

具体区域的CSS如下：

.panel-clr.on {
background-color: #9D1E3A;
color: white; }

Bootstrap 是很好的衡量标准：

   <div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading alternate panel-clr" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
            <h4 class="panel-title">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                    Collapsible Group 1
                </a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
            <div class="panel-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                commodo consequat.
            </div>
        </div>
    </div>
  </div>

更新：我尝试了 CSS 转换方法，但似乎没有任何效果。

Answer 1

这是一个使用 jQuery 的解决方案。您不需要按钮的两个单击事件处理程序，因此您可以删除第二个事件处理程序。

$('.panel-clr').click(function () {
    var panel = $(this);
    panel.toggleClass('on');
    var icon = panel.find('span').first();
    icon.toggleClass('glyphicon-chevron-right').toggleClass('glyphicon-chevron-down');
    panel.siblings().removeClass('on');
    panel.siblings().find('span').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-right');
});

jsFiddle
https://jsfiddle.net/Lwvtz1r3/