JQuery手风琴：将独特风格应用于“打开”状态

Question

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

当您点击菜单 DIVS，一个特定的对应面板 DIV幻灯片打开。 如何制作面板以便在面板打开时对应菜单 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/

我真的很感激任何帮助！ :)

Answer 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 

Answer 2

菜单DIV将得到ui-state-active样式在打开时应用于它。使用它。