Jquery menu - 在父菜单按钮上切换子菜单区域和 css 状态更改

Question

抱歉，如果这很容易或者我错过了重点......

通过搜索 stackoverflow，我结合了两个非常有用的代码段，但我得到了一个奇怪的结果。

我有一个带有 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

更新答案：- ** 请参阅上面的代码 **"UPDATED LINE" 了解您的第二个问题 - 如果用户连续点击两次 - 它将删除"on" 来自链接的 clss。

See the Updates JSFiddle here