jQuery实例——下拉菜单

最新推荐文章于 2022-03-31 19:06:32 发布

jwz934738949

最新推荐文章于 2022-03-31 19:06:32 发布

阅读量566

点赞数

分类专栏： jQuery+Ajax

本文链接：https://blog.csdn.net/jwz934738949/article/details/108364049

版权

jQuery+Ajax 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

当鼠标移入一级菜单，显示二级菜单，当鼠标移出时，不显示二级菜单
在使用动画效果时，可以在动画执行之前，执行stop方法，停止之前执行的动画，避免上次执行的动画对当前执行动画的影响

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>下拉菜单</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .nav {
      list-style: none;
      width: 300px;
      height: 50px;
      margin: 100px auto;
      background-color: bisque;
    }

    .nav > li {
      float: left;
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }

    .sub {
      list-style: none;
      background-color: aquamarine;
      display: none;
    }


  </style>
  <script src="./js/jquery-3.5.1.js"></script>
  <script>
    $(function () {
      // 监听一级菜单移入事件
      $(".nav>li").mouseenter(function () {
        // 获取二级菜单
        const $sub = $(this).children(".sub")
        // 停止之前运行的动画
        $sub.stop()
        // 下拉二级菜单
        $sub.slideDown(1000)
      })
      // 监听一级菜单移出事件
      $(".nav>li").mouseleave(function () {
        // 获取二级菜单
        const $sub = $(this).children(".sub")
        // 停止之前运行的动画
        $sub.stop()
        // 收起二级菜单
        $sub.slideUp(1000)
      })
    })
  </script>
</head>
<body>
<ul class="nav">
  <li>一级菜单
    <ul class="sub">
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
  <li>一级菜单
    <ul class="sub">
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
  <li>一级菜单
    <ul class="sub">
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>

</ul>
</body>
</html>