JQuery选择性选择

Question

我有一些动态菜单。一旦有人单击菜单中的链接，我想突出显示此单击的菜单。

$("#my_menu > li").click(function(){
   var clickedId = $(this).attr('id');
   $("#" + clickedId).css("font-weight", "bold");
   $("#" + clickedId).css("background-color", "#E0E0E0");
   $('#navigation_submenu').show(); //this is not important
});

但现在我必须将其他菜单恢复到初始状态。请有人可以帮助我该怎么做？谢谢

Answer 1

更好的方法是使用 addClass() 和 removeClass() 这样:

• 首先在 CSS 中为事件项创建一个类:

  .active {
     font-weight:bold;
     background-color:#E0E0E0;
  }
  

• 然后使用 Jquery:

  $("#my_menu > li").click(function(){
     //Remove previous active item
     $("#my_menu > li").removeClass('active');
     //Add class on clicked element
     $(this).addClass('active')   
  });
  

检查这个 Demo Fiddle