使用 toggleClass 的简单 jQuery 下拉菜单答案

【问题标题】：simple jQuery dropdown menu using toggleClass使用 toggleClass 的简单 jQuery 下拉菜单
【发布时间】：2016-09-21 14:07:11
【问题描述】：

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

<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>

【问题讨论】：

一个<li>元素不能是<nav>元素的直接子元素，<li>元素的唯一有效父元素是<ul>或@987654326 @，意味着你的 HTML 完全无效，谁知道标记无效时会发生什么。
是的，我现在只是做了一个粗略的标记，但我想知道如何做 jquery 你能帮我处理一下 jquery 吗？

标签： jquery html css

【解决方案1】：

使<nav> 显示隐藏而不是<li>。因此，在<nav> 标签上应用活动类。

请查看下面的 sn-p 了解更多详细信息。相应地更改了 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>

【讨论】：

【解决方案2】：

更改：

 $("nav li:first").toggleClass("active");

到：

$("nav li",this).toggleClass("active");

最终代码：

$(document).ready(function() {
    
    $("ul li").hover(function() {
        // remove classes from all
        $("nav li",this).toggleClass("active");

    })
    
})

.container nav li {display: none;}
.container nav li.active {display:block;}

<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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

【讨论】：

【解决方案3】：

您只能使用 CSS 来实现这一点，请按照下面的代码进行操作

HTML：

<div class="container">
    <ul>
      <li>
          <a href="#">menu1</a>
            <nav>
            <li>sub 1</li>
            </nav>
      </li>
      <li>
          <a href="#">menu2</a>
            <nav>
                 <li>sub 1</li>
                 <li>sub 2</li>
            </nav>
      </li>
    </ul>
</div>

CSS：

li{
    transition:0.3s ease-In-Out;
    cursor:pointer;
}
.container nav li {
    display: none;
}
.container nav li.active {
    display:block;
}
ul li:hover nav li{
    display:block;
}

查看此链接以查看现场演示： https://jsfiddle.net/1235aamp/

【讨论】：