jquery - 使用 toggleClass 的简单 jQuery 下拉菜单

Question

我有以下代码，但我的问题是，当我将鼠标悬停在一个菜单上时，所有子菜单都在下拉菜单中打开，我如何只在我单击的特定菜单按钮上激活类:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
    $("ul li").hover(function() {
      // remove classes from all
      $("nav li:first").toggleClass("active");

    });
  });
</script>

<style type="text/css">
  .container nav li {display: none;}
  .container nav li.active {display:block;}
</style>
<div class="container">
  <ul>
    <li>
      <span>1</span>
      <nav><li>sub 1</li>
      </nav>
    </li>

    <li>
      <span>2</span>
      <nav><li>sub 1</li>
        <li>sub 2</li>
      </nav>
    </li>

  </ul>


</div>

Answer 1

制作<nav>显示隐藏而不是 <li> .因此，在 <nav> 上应用事件类标签。

请查看下面的代码片段了解更多详情。相应地更改了 css 和 jquery 代码。

$(function() {
  $("ul li").hover(function() {
    $("nav").removeClass("active");
    // remove classes from all
    $(this).find("nav").toggleClass("active");
  });
});

.container nav{display: none;}
.container nav.active {display:block;padding-left:25px;}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<div class="container">
  <ul>
    <li>
      <span>1</span>
      <nav><li>sub 1</li>
      </nav>
    </li>

    <li>
      <span>2</span>
      <nav>
        <li>sub 1</li>
        <li>sub 2</li>
      </nav>
    </li>

  </ul>


</div>