jQuery实现折叠菜单

小鱼儿 2023-06-15 06:38 17阅读 0赞

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

搞个效果图看看  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzMzMwOQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzMzMwOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191120154951824.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzMzMwOQ==,size_16,color_FFFFFF,t_70