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