jQuery的菜單 - 切換子菜單區和父菜單按鈕CSS狀態變化

Question

道歉，如果這是很容易或我已經錯過了點...

從搜索計算器，我結合了兩種非常有幫助代碼段，但我有一個奇怪的結果。

我有一個帶有3個父按鈕的菜單 - 每次單擊其中一個按鈕時，我想打開一個子導航框並更改父菜單項的CSS狀態。我希望這樣做，然後切換回下一次點擊或另一個父菜單項被點擊。

我在下面切換的子導航框打開/關閉，但切換非點擊父母菜單（與我想要的相反！）。我認爲我很近，但還很遠很遠！下面是我有：

的jQuery：

$(window).load(function(){ 
$(".shownavsection").click(function() { 
var cls = this.className.match(/link1|link2|link3/), 
    box = $(".section."+cls[0]); 

// slideUp() on all .countries elements 
$(".section").not(box).slideUp(); 

box.slideToggle(); 

$(".arr").not($(this)).toggleClass("on"); 
; 
return false; 


}); 
});//]]> 

CSS

li{ 
list-style-type:none; list-style-position:inside} 

a.arr:link, a.arr:visited 
{ 
width:160px; border-bottom:1px solid #CCC; float:left; 
font-family:Tahoma, Arial, Helvetica, sans-serif; 
font-size:12px; 
background-color: #FFF; 
height:21px; display:block; 
text-decoration:none; 
color:#999999; 
padding:5px 0px 0px 10px 
} 

a.arr:hover 
{ 
background-color:#f2f2f2; 
font-family:Tahoma, Arial, Helvetica, sans-serif; 
font-size:12px;color:#999999 
} 

.on { 
background: #000 !important; 
} 
.mm { 
border:1px solid #013b5d; 
border-top: 1px solid #fff; 
width: 960px; 
height:auto; 
padding:10px 5px 20px 5px; 
display:none; 
margin-top:10px; 
clear: both; 
-moz-box-shadow: 0 8px 10px #888; 
-webkit-box-shadow: 0 8px 10px #888; 
box-shadow: 0 8px 10px #888;  

font-family:Arial, Helvetica, sans-serif; 
} 

HTML

<ul> 

<li><a href="#" class="shownavsection link1 arr"> link 1</a></li> 
<li><a href="#" class="shownavsection link2 arr"> link 2</a></li> 
<li><a href="#" class="shownavsection link3 arr"> link 3</a></li> 
</ul> 

<div class="section link1 mm cf">1</div> 
<div class="section link2 mm cf">2</div> 
<div class="section link3 mm cf">3</div> 

感謝所有幫助

Answer 1

使用下面的代碼 - 你必須使用.addClass()和.removeClass()

Working - JSFIDDLE

$(window).load(function(){  
    $(".shownavsection").click(function() { 
    var cls = this.className.match(/link1|link2|link3/), 
     box = $(".section."+cls[0]); 
     $(".shownavsection").not(this).removeClass("on"); // UPDATED LINE 
     $(this).toggleClass("on");      // UPDATED LINE 
     $(".section").not(box).slideUp(); 
     box.slideToggle(); 
     return false; 
    }); 
}); 

Click here to - Working Demo

更新答： - **看到上面的代碼** 「更新的訂單」爲您的第二個問題相關 - 如果用戶點擊兩次連續 - 它會從鏈接中刪除"on" clss。

See the Updates JSFiddle here