Question

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

然而，我遇到的问题是，如果我在打开它后点击相同的面板，则样式会显示在其中＆＃34;打开＆＃34;州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>

UPDATE：我尝试了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/

关闭Panel后重置Bootstrap Panel Heading

1 个答案: