天天看点
返回

jQuery实现折叠菜单

jQuery实现折叠菜单

今天在观看李南江老师的jQuery视屏时，正好遇到老师在讲jQuery实现折叠菜单，但是老师的折叠菜单不是很完善在

这里我对老师的代码进行了修改，简单的实现折叠菜单的基本效果（麻雀虽小，五张俱全）。先附上老师视频的地址

(https://www.bilibili.com/video/av22807707?p=42)。 话不多少直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>折叠菜单</title>
  <script src="jQuery/jquery-3.4.1.min.js"></script>
  <script>
    $(function () {
      $(".nav>li").click(function () {
        var sub = $(this).children(".sub"); //获取当前一级目录的二级目录

        sub.click(function () {  //阻止事件冒泡
          return false;
        })

        sub.stop().slideToggle(500, function () {
          // console.log(sub.css("display"))
          if (sub.css("display") == 'block') { //如果二级目录是展示的状态
            $(this).parent().addClass("current"); //将一级菜单的current加上(为了使箭头向下)
          } else {
            $(".nav>li").removeClass("current") //将一级菜单的current去除(为了使箭头回归原位)
          }
        });
        $(this).siblings().children(".sub").slideUp(500); //将其他二级菜单隐藏

        //这里为什么要重复写？你可以去掉看看效果对不对？
        $(".nav>li").removeClass("current")
        $(this).addClass("current");
      })
    })
  </script>

  <style>
    * {
      margin: 0px;
      padding: 0px;
      font-family: '微软雅黑';
      font-size: 16px;
      color: #5e5e5e;
    }

    .nav {
      list-style: none;
      width: 300px;
      margin: 100px auto;
    }

    .nav>li {
      border: #ff6600 1px solid;
      line-height: 35px;
      border-bottom: none;
      position: relative;
    }

    .nav>li:last-child {
      border-bottom: #ff6600 1px solid;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }

    .nav>li:first-child {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    .nav>li>span {
      background: url("images/right.png") no-repeat center center;
      background-size: cover;
      display: inline-block;
      width: 25px;
      height: 25px;
      position: absolute;
      top: 5px;
      right: 10px;
    }

    .nav>.current>span {
      transform: rotate(90deg);
    }

    .sub {
      list-style: none;
      display: none;
    }

    .sub>li {
      background: #09bddd;
      border-bottom: 1px solid white;
    }

    .sub li:hover {
      background: #03434e;
    }
  </style>
</head>

<body>
  <ul class="nav">
    <li>一级菜单 <span></span>
      <ul class="sub">
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
      </ul>
    </li>
    <li>一级菜单 <span></span>
      <ul class="sub">
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
      </ul>
    </li>
    <li>一级菜单 <span></span>
      <ul class="sub">
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
      </ul>
    </li>
    <li>一级菜单 <span></span>
      <ul class="sub">
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
      </ul>
    </li>
    <li>一级菜单 <span></span>
      <ul class="sub">
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
      </ul>
    </li>
    <li>一级菜单 <span></span>
      <ul class="sub">
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
      </ul>
    </li>
    <li>一级菜单 <span></span>
      <ul class="sub">
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
      </ul>
    </li>
    <li>一级菜单 <span></span>
      <ul class="sub">
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
      </ul>
    </li>
  </ul>
</body>

</html>

搞个效果图看看

jQuery实现折叠菜单
javascript jquery
上一篇: jQuery实例——折叠菜单
下一篇: easyui treegrid 添加复选框

继续阅读