JQuery 手风琴：将独特的样式应用于“打开”状态答案

【问题标题】：JQuery accordion: applying unique style to "open" stateJQuery 手风琴：将独特的样式应用于“打开”状态
【发布时间】：2016-01-19 19:16:19
【问题描述】：

我发现了一个简单的 JQuery 手风琴结构，它使用 DIV 而不是典型的 UL 结构。

当您单击菜单 DIVS 时，会打开一个特定的相应面板 DIV 幻灯片。如何使面板打开时，其对应的 menu DIV 会应用不同的样式？

JS：

$(document).ready(function() {
    $("#menu1").data("panelId", "#collapse_about");
    $("#menu2").data("panelId", "#collapse_portfolio");
    $("#menu3").data("panelId", "#collapse_contact");

    $("#menu1, #menu2, #menu3").click(function() {
        var first = true;
        var panelId = $(this).data("panelId");
        $(".class1").not(panelId).slideUp(function() {
            if (first) {
                first = false;
                $(panelId).slideToggle(400);
            }
        });
    });
});

CSS：

.class1 {width:200px; height:200px; border:1px solid black; display:none;}
 #collapse_about {background:red; margin-bottom:10px;}
 #collapse_portfolio {background:blue; margin-bottom:10px;}
 #collapse_contact {background:orange; margin-bottom:10px;}
  #menu1 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;}
 #menu2 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;}
 #menu3 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;}

HTML：

<div id="menu1">Menu 1</div>
<div id="collapse_about" class="class1">Content 1</div>
<div id="menu2">Menu 2</div>
<div id="collapse_portfolio" class="class1">Content 2</div>
<div id="menu3">Menu 3</div>
<div id="collapse_contact" class="class1">Content 3</div>

这是 JSFiddle 上的代码：http://jsfiddle.net/Gaelen/aTR2b/2/

非常感谢任何帮助！ :)

【问题讨论】：

标签： jquery accordion

【解决方案1】：

这是你的答案：

http://jsfiddle.net/maniator/aTR2b/3/

我添加到 css 中：

.menu_active{ background: grey;}

对于 js：

$("#menu1, #menu2, #menu3").click(function() {
    $(".menu_active").removeClass('menu_active');
    $(this).addClass('menu_active');
    //... rest of the fn

【讨论】：

太棒了。非常感谢！
然后当你得到你想要的正确答案时，stackoverflow 上的正确方式是什么。你选择它作为“接受”，而不是人们很可能会在未来的 Q 上帮助你更多:-)
哦，我以为我已经这样做了。那是绿色的大勾号吗？
:) 谢谢。正如您可能猜到的那样，我是 stackoverflow 的新手。
Neal，当您 re -collapse a panel 时，有没有办法让 menu div 恢复到原来的状态（即非灰色） ?

【解决方案2】：

Menu div 打开时会应用 ui-state-active 样式。使用它。

【讨论】：