Question

我正在尝试更改菜单项的类，以便在单击时显示。我已经让它工作了，当你再次点击它时它唯一没有恢复的东西。我不确定如何在点击时删除该课程。

非常感谢所有帮助。

   <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
  .menu ul li ul li {display:none}
  .menu .on ul li{display:block}
  .menu .on ul li ul{display:none}
  .menu .on ul li:hover ul{display:block}
  </style>
</head>
<body>
<div class="menu">
<ul>
  <li><a href="#">Toggle</a>
  <ul>
  <li>See</li></ul></li>
  <li><a href="#">Toggle</a>
  <ul>
  <li><a href="#">See</a>
  <ul><li><a href="#">See 2</a></li></ul></li></ul></li>
  </ul>
  </div>


<script>
$('li a').click(function() {
  $(this).parent().addClass('on').siblings().removeClass('on');
});

</script>

</body>
</html>

Answer 1

您需要toggleClass()

Answer 2

使用toggleClass ^{[API Ref]} 分别关闭/关闭您点击/关闭的兄弟姐妹：

$('li a').click(function() {
    var parent = $(this).parent();
        siblings = parent.siblings(),
        isOn = parent.toggleClass('on').hasClass('on');

    siblings.toggleClass('on', !isOn);
});

单击菜单上的Jquery更改类

2 个答案: