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

Question

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

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

我有一个包含 3 个父按钮的菜单 - 每次单击其中一个时，我希望它打开一个子导航框并更改父菜单项的 css 状态。我希望在下次点击或点击另一个父菜单项时切换回来。

我下面的内容切换了子导航框 open/closed，但切换了未单击的父菜单项（与我想要的相反！）。我认为我很近，但又很远！这是我拥有的：

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() and .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" 对于您的第二个相关问题 - 如果用户 单击两次 一行 - 它将从 link.

中删除 "on" clss

See the Updates JSFiddle here

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

Jquery menu - toggle sub-menu area and css state change on parent menu button

css

jquery

toggle