Question

我有以下jQuery代码：

    $("ul.menu li a").click(function() {
      $("ul.menu li a").removeClass("currentMenu");
      $(this).addClass("currentMenu");
    });

在页面启动时，我的“主页”菜单按钮设置为“currentMenu”，基本上将颜色背景设置为橙色。

我想要实现的，上面的jQuery代码不能满足的是如果我点击设置为“currentMenu”的现有“Home”按钮，我实际上想要删除这个类，所以“Home”按钮不再具有橙色背景颜色，反之亦然，当“Home”按钮未设置时，则设置为“currentmenu”类。

希望这是有道理的。

Answer 1

您可以使用.not()来过滤掉当前元素，然后.toggleClass()，如下所示：

$("ul.menu li a").click(function() {
  $("ul.menu li a").not(this).removeClass("currentMenu");
  $(this).toggleClass("currentMenu");
});

You can test it out here，这只会将点击的锚点过滤出来，这样它就不会受到.removeClass()的影响，然后.toggleClasss()代替.addClass()来提供切换你想要的开/关效果。

Answer 2

这样的事可能有用：

$("ul.menu li a").click(function() {

  if ($(this).is(".currentMenu")) {
    $(this).removeClass("currentMenu");
  } else {
    $(this).addClass("currentMenu");
  }

  $("ul.menu li a").not(this).removeClass("currentMenu");
});

使用jQuery在Menu Active状态之间切换

2 个答案: