如何用jQuery实现折叠菜单

最新推荐文章于 2023-04-15 14:00:30 发布

yg94web

最新推荐文章于 2023-04-15 14:00:30 发布

阅读量2.7k

点赞数 3

文章标签： jquery

本文链接：https://blog.csdn.net/yg94web/article/details/109519041

版权

点击一级菜单弹出二级菜单，同时其他一级菜单关闭，点击同一个菜单会也会收起本一级菜单下的二级菜单

下面附上源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            position: relative;
            top: 20px;
            left: 20px;
            width: 168px;
            list-style: none;
        }
        .nav>li{
            border: 1px solid black;
            text-indent: 1em;
            line-height: 30px;
            border-bottom: none;
            position: relative;
        }
        .nav>li:last-child{
            border-bottom: 1px solid black;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .nav>li:first-child{
            border-top: 1px solid black;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        .nav>li>span{
            position: absolute;
            top: 3px;
            right: 10px;
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(./image/右箭头.png);
            background-size: 20px 20px;
        }
    /*    二级菜单*/
        .content{
            display: none;
        }
        .content>li{
            list-style: none;
            background-color: mediumpurple;
            border-bottom: 1px solid white;
            text-indent: 2em;
        }
        .content>li:last-child{
            border-bottom: none;
        }
        .content>li:hover{
            background-color: violet;
        }
        .nav>.current>span{
            transform: rotate(90deg);
        }
    </style>
        <script src="js/jquery.js"></script>
         <script>
              $(function (){
                  //1监听一级菜单的点击事件
                  $(".nav>li").click(function (){
                      //1.1拿到二级菜单
                      let $content = $(this).children(".content");
                      //1.2清空动画队列让二级菜单展开
                      $content.stop();
                      $content.slideToggle(500);
                      //1.3拿到所有非当前的二级菜单
                      let $otherContent = $(this).siblings().children(".content")
                      //1.4让所有非当前的二级菜单收起
                      $otherContent.slideUp(500);
                      //1.5让被点击的一级菜单箭头旋转
                      if($(this).hasClass("current")){
                          $(this).removeClass("current");
                      }else{
                          $(this).addClass("current");
                      }
                      //1.6让未被点击的一级菜单箭头复原
                      $(this).siblings().removeClass("current");
                  })
              });
         </script>
</head>
<body>
<ul class="nav">
    <li>一级菜单<span></span>
        <ul class="content">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="content">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="content">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
</ul>
</body>
</html>

效果截图

在这里插入图片描述

### 总结使用display:none（隐藏样式）和slideDown、slideUp、slideToggle(滑出、收回、切换)等属性和方法相互配合就能实现。(注：需要对jQuery语法有一定了解）

yg94web

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
如何用jQuery实现折叠菜单

点击一级菜单弹出二级菜单，同时其他一级菜单关闭，点击同一个菜单会也会收起本一级菜单下的二级菜单### 下面附上源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padd
复制链接

扫一扫