活动/非活动Jquery导航菜单

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

我有一个这样的简单列表：

 
Menu 1
 
Menu 2
 
Menu 3
  

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

我可以使用以下代码获得此结果：

  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");}); });  

该脚本有效，但如果您单击＃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"); }); }); 

这是一个例子 。

Answer 2

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

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