jquery - 事件/非事件 Jquery 导航菜单

Question

我不熟悉 javascript，所以如果有人可以帮助我，我将非常感激。

我有一个像这样的简单列表:

<ul>
<li id="nav1">Menu 1</li>
<li id="nav2">Menu 2</li>
<li id="nav3">Menu 3</li>
</ul>

当用户单击菜单元素时，我想添加一个类“menu_active”。

我可以使用以下代码达到此结果:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#nav1").toggle(function () {jQuery(this).addClass("menu_active");},function () {jQuery(this).removeClass("menu_active");});
jQuery("#nav2").toggle(function () {jQuery(this).addClass("menu_active");},function () {jQuery(this).removeClass("menu_active");});
jQuery("#nav3").toggle(function () {jQuery(this).addClass("menu_active");},function () {jQuery(this).removeClass("menu_active");});
});
</script>

该脚本有效，但如果您单击#nav1，然后单击#nav2，然后单击#nav3，所有三个项目都将具有“menu_active”类。

是否有一种简单的方法可以仅突出显示单个菜单元素？

Answer 1

我认为这应该有效:

$(function(){
    var menus = $("#nav1, #nav2, #nav3");
    menus.click(function(){
        menus.not(this).removeClass("menu_active");
        $(this).toggleClass("menu_active");
    });
});

这是一个example .