Active/inactive 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”类。

是否有一种简单的方式只高亮一个菜单元素？

- Pennywise83

---

在将其添加到刚刚点击的元素之前，从所有三个中删除menu_active类。 - Joe C.

Answer 1

我认为这应该可以工作：

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

这是一个示例。

- Oleg Grishko

Answer 2

是的，您可以在将其添加到单击的元素之前从包含它的任何元素中删除menu_active类。看：

jQuery(".menu_active").removeClass("menu_active");

- Fabio Milheiro