jQuery:具有两个功能的点击事件

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

slideToggling时，还需要toggleClass!

在您的代码中替换以下内容:

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

有了这个:

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