JQuery手風琴：在「關閉」狀態下回復到之前的風格

Question

我正在使用簡單的使用DIV而非典型UL結構的JQuery手風琴。

• 當你點擊一個菜單 DIV，具體對應的面板 DIV滑開。
• 菜單 DIV的風格變化（灰色）表明它是活動的。
• 當您再次單擊它時，面板 DIV關閉。
• 當發生這種情況時，我想菜單 DIV恢復到它以前的樣式。
• 目前它只是保持灰色。

任何人都可以幫忙嗎？

這裏是的jsfiddle代碼：http://jsfiddle.net/Gaelen/aTR2b/6/

的JavaScript：

$(document).ready(function() { 
    $("#menu1").data("panelId", "#collapse_photography"); 
    $("#menu2").data("panelId", "#collapse_fineart"); 
    $("#menu3").data("panelId", "#collapse_architecture"); 
    $("#menu4").data("panelId", "#collapse_graphdesign"); 
    $("#menu5").data("panelId", "#collapse_infographics"); 
    $("#menu6").data("panelId", "#collapse_3dviz"); 

    $("#menu1, #menu2, #menu3, #menu4, #menu5, #menu6").click(function() { 
     $(".menu_active").removeClass('menu_active'); 
     $(this).addClass('menu_active'); 
     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;} 
.menu_active{ background: grey;} 
#collapse_photography {background:red; margin-bottom:10px;} 
#collapse_fineart {background:red; margin-bottom:10px;} 
#collapse_architecture {background:red; margin-bottom:10px;} 
#collapse_graphdesign {background:red; margin-bottom:10px;} 
#collapse_infographics {background:red; margin-bottom:10px;} 
#collapse_3dviz {background:red; 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;} 
#menu4 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;} 
#menu5 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;} 
#menu6 {cursor:pointer; display:block; width:200px; border:1px solid black; margin-bottom:10px;} 

HTML：

<div id="menu1"><a href="#">Photography</a></div> 
<div id="collapse_photography" class="class1">Content 1</div> 
<div id="menu2">Fine Art</div> 
<div id="collapse_fineart" class="class1">Content 2</div> 
<div id="menu3">Architecture</div> 
<div id="collapse_architecture" class="class1">Content 3</div> 
<div id="menu4">Graphic + Web Design</div> 
<div id="collapse_graphdesign" class="class1">Content 4</div> 
<div id="menu5">Information Graphics</div> 
<div id="collapse_infographics" class="class1">Content 5</div> 
<div id="menu6">3D Visualisation</div> 
<div id="collapse_3dviz" class="class1">Content 6</div> 

Answer 1

嘗試使用.toggleClass()

$(".menu_active").not(this).removeClass('menu_active'); 
    $(this).toggleClass('menu_active'); 

更新jsfiddle。