Question

我有一个带有headbar-div和content-div的盒子，我创建了一个脚本，可以用幻灯片效果切换content-div。通常headbar-div有一个背景颜色#ccc但是当我切换内容时，headbar-div的背景颜色应该是#FFF; 之后，如果我再次显示内容，背景颜色应该再次更改为#ccc。

使用我的代码问题是，如果我再次点击，背景颜色不会改变回来

脚本

$( ".togglepanelcontent" ).click(function() {
    var icon = $( this );
    icon.closest( ".panelgroup" ).find( ".panelcontent" ).slideToggle();
    icon.closest( ".panelgroup" ).find( ".panelheadbar" ).addClass("panelheadbar_m");
});

HTML

<div id="module" class="panelgroup">
    <div class="panelheadbar">Title<div class="togglepanelcontent"><span>-</span></div></div>
    <div id="pc" class="panelcontent ui-resizable">
        Text
    </div>
<br>

CSS

.togglepanelcontent {
    float: right; cursor: pointer;
}
.panelheadbar {
    padding: 5px;
    font-weight: bold; 
    color: #000;
    overflow: hidden;
    height: auto;
    cursor: move;
    border-bottom: 1px solid #333;
    background-color: #ccc;
}
.panelheadbar_m {
    background-color: #FFF !important;
}
.panelheadbar_m:hover { 
    background-color: #ccc !important;
}
.panelcontent {
    overflow: auto;
    overflow-x: hidden;
    padding: 10px; 
    top: 0px; 
    left: 0px;
    background-color: #FFF;
    border-left: 1px solid #333;
    border-right: 1px solid #333; 
    border-bottom: 1px solid #333;
}

Answer 1

当您进行幻灯片切换时，您还需要toggleClass！

在代码中替换以下内容：

icon.closest( ".panelgroup" ).find( ".panelheadbar" ).addClass("panelheadbar_m");

有了这个：

icon.closest( ".panelgroup" ).find( ".panelheadbar" ).toggleClass("panelheadbar_m");

jQuery：点击具有两个函数的事件

1 个答案: