JQuery实现折叠菜单。三个版本，写法。

最新推荐文章于 2024-04-30 16:57:21 发布

陌巷偷客

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量4.7k

点赞数 8

分类专栏： JQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_53881313/article/details/124971849

版权

JQuery 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

效果如图所示：

点击后展开菜单。同等高度，上面是因为截图原因。

代码如下：

版本1：练习用选择器写样式。代码很丑，后面有好看的。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item">
            <div class="item01 click01" id="click01">信息管理</div>
            <div class="same hiddenitem01" id="hidden01">
                <div class="hiddencontent01">未读信息</div>
                <div class="hiddencontent01">已读信息</div>
                <div class="hiddencontent01">信息列表</div>
            </div>
        </div>
        <div class="item">
            <div class="item01">商品管理</div>
        </div>
        <div class="item">
            <div class="item01 click02" id="click02">用户管理</div>
            <div class="same hiddenitem02" id="hidden02">
                <div class="hiddencontent01">权限设置</div>
                <div class="hiddencontent01">用户列表</div>
                <div class="hiddencontent01">重置密码</div>
            </div>
        </div>
    </div>
    <script src="../js/jquery.min.js"></script>
    <script>
        $('.box').css({
            'margin': '200px auto 0',
            'padding- left': '10px',
            'width': '200px',
            'font-size': '18px',
            'box- sizing': 'border-box'

        });
        $('.item01').css({
            'height': '40px',
            'padding-left': '8px',
            'line-height': '40px',
            'background-color': 'rgb(12, 66, 92)',
            'color': '#fff',
            'margin-bottom': '2px',
        });

        $('.same').css({
            'display': 'none',
            'width': '100 %',
            'background-color': '#fff',
            'color': 'black',
            'font-size': '14px',
            'padding-left': '8px',
        });
        $('.hiddencontent01').css({
            'width':'100 %',
            'background-color':'#fff',
            'color':'black',
            'font-size':'16px',
            'height':'40px',
            'padding-left':'8px',
            'line-height':'40px',
            'margin-bottom':'4px',
        });
       $('#click01').click(function () {
            $('.hiddenitem01').css({
               'display':'block',
                'border': '1px solid black',
           })
        })
        $('#click02').click(function () {
           $('.hiddenitem02').css({
                'display': 'block',
                'border': '1px solid black',
            })
        })
        

    </script>
</body>

</html>

版本二：好看了一点。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 100%;
      overflow: hidden;
      background-color: #324252;
      font-size: 18px;
    }
    ul,li{
      list-style: none;
    }
    .list{
      width: 400px;
      margin: 200px auto;
      background-color: #3e5165;
      box-shadow: 0px 0px 25px #00000070;
    }
    .item{
      width: 350px;
      /* height: 50px; */
      line-height: 50px;
      padding-left: 45px;
      color: #FFF;
      font-weight: bold;
      /* box-sizing: border-box; */
    }
    .item:hover{
      color: #46efa4;
      cursor: pointer;
    }
    .inner-item{
      margin-left: -45px;
      padding-left: 45px;
    }
    .item+.item,.inner-item{
      border-top: 1px solid #324252;
    }
    .inner-list{
      display: none;
      color: rgb(138, 143, 240);
      font-size: 14px;
      font-weight: normal;
    }
    .show{
      display: block;
    }
  </style>
</head>
<body>
  <ul class="list">
    <li class="item">我的
      <ul class="inner-list">
        <li class="inner-item">发布</li>
        <li class="inner-item">图片</li>
      </ul>
    </li>
    <li class="item">邮件
      <ul class="inner-list">
        <li class="inner-item">写邮箱</li>
        <li class="inner-item">草稿箱</li>
        <li class="inner-item">已发送</li>
        <li class="inner-item">垃圾箱</li>
      </ul>
    </li>
    <li class="item">设置
      <ul class="inner-list">
        <li class="inner-item">密码</li>
        <li class="inner-item">语音</li>
        <li class="inner-item">关于</li>
        <li class="inner-item">版本更新</li>
      </ul>
    </li>
  </ul>
  <script src="../js/jquery.min.js"></script>
  <script>
    $(".item").each((index,element)=>{
      $(element).click(function(){
        if($(this).find(".inner-list").hasClass('show')){
          $(this).find(".inner-list").removeClass('show')
        }else{
          $(".item").each((index,element)=>{
            if($(element).find(".inner-list").hasClass('show')){
              $(element).find(".inner-list").removeClass("show")
            }
          })
          $(this).find(".inner-list").addClass("show")
        }
      })
    })

  </script>
</body>
</html>

版本三：更便于理解和简单易懂：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul,
        li {
            list-style: none;
        }

        .box {
            width: 1000px;
            margin: 20px auto 0;
        }

        .menu-box {
            width: 150px;
            display: flex;
            flex-direction: column;
        }

        .menu-item {
            border-bottom: 1px solid #fff;
        }

        .menu-item.show {
            border-bottom: none;
        }

        .menu-item>.item-title {
            height: 40px;
            padding: 0 10px;
            color: #fff;
            font-size: 16px;
            line-height: 40px;
            background-color: #515e7b;
        }

        .menu-item>.item-list {
            display: none;
            padding: 10px;
            border: 1px solid #515e7b;
            border-top: none;
            background-color: #fff;
        }

        .menu-item.show>.item-list {
            display: block;
        }

        .menu-item .list-item {
            font-size: 12px;
            color: #515e7b;
            line-height: 2;
        }
    </style>
</head>

<body>

    <div class="box">
        <!-- 折叠菜单 -->
        <div class="menu-box">
            <div class="menu-item jq-menu-item">
                <div class="item-title">信息管理</div>
                <ul class="item-list">
                    <li class="list-item">未读信息</li>
                    <li class="list-item">已读信息</li>
                    <li class="list-item">信息列表</li>
                </ul>
            </div>
            <div class="menu-item jq-menu-item">
                <div class="item-title">商品管理</div>
                <ul class="item-list">
                    <li class="list-item">未读信息</li>
                    <li class="list-item">已读信息</li>
                    <li class="list-item">信息列表</li>
                </ul>
            </div>
            <div class="menu-item jq-menu-item">
                <div class="item-title">用户管理</div>
                <ul class="item-list">
                    <li class="list-item">权限设置</li>
                    <li class="list-item">用户列表</li>
                    <li class="list-item">重置密码</li>
                </ul>
            </div>
        </div>
    </div>

    <script src="../js/jquery.min.js"></script>
    <script>
        $('.jq-menu-item').click(function () {
            $(this).siblings().removeClass('show');
            $(this).toggleClass('show');
        });
    </script>
</body>

</html>

jQuery选择器类似CSS选择器的机制的一种操作HTML元素的方式。

好处：可以轻松的获取DOM元素。

jQuery选择器的基本语法：$(选择器)。

根据选择器获取方式的不同大致可以将其分为以下几类。

基本选择器
层级选择器
基本过滤选择器
内容选择器
可见性选择器
属性选择器
子元素选择器
表单选择器

1 基本选择器

jQuery中基本的选择器，常用的分别为：标签选择器、类选择器和ID选择器。

选择器	功能描述	示例
element	根据指定元素名匹配所有元素	`$("li")`选取所有的`<li>`元素
.class	根据指定类名匹配所有元素	`$(".bar")`选取所有class为bar的元素
#id	根据指定id匹配一个元素	`$("#btn")`选取id为btn的元素
selector1,selector2,…	同时获取多个元素	`$("li,p,div")`同时获取所有`<li>、<p>和<div>`元素

2 层级选择器

层级选择器，通过一些指定符号，如空格、>、+和~完成多层级元素之间的获取。

选择器	功能描述	示例
selector selector1	选取祖先元素下的所有后代元素	`$("div .test")` 选取`<div>`下所有class名为test的元素（多级）
parent > child	获取父元素下的所有子元素	`$(".box >.con")` 选取class名为box下的所有class名为con的子元素（一级）
prev + next	获取当前元素紧邻的一下同级元素	`$("div + .title")`获取紧邻`<div>`的下一个class名为title的兄弟节点
prev~siblings	获取当前元素后的所有同级元素	`$(".bar ~ li")`获取class名为bar的元素后的所有同级元素节点`<li>`

3 基本过滤选择器

基本过滤选择器，表示对获取到的元素进行筛选，如偶数行中的元素等。

选择器	功能描述	示例
:first	获取指定选择器中的第一个元素	`$("li :first")`获取第1个`<li>`元素
:last	获取指定选择器中的最后一个元素	`$("li :last")`获取最后1个`<li>`元素
:even	获取索引为偶数的指定选择器中的奇数行数据，索引默认从0开始	`$("li :even")`获取所有li元素中，索引为偶数的奇数行数据，如索引为0,2,4的第1个、第3个和第5个`<li>`元素
:odd	获取索引为奇数的指定选择器中的偶数行数据，索引默认从0开始	`$("li :odd")`获取所有`<li>`元素中，索引为奇数的偶数行数据，如索引为1,3,5的第2个、第4个和第6个`<li>`元素
:eq(index)	获取索引等于index的元素，默认从0开始	`$("li:eq(3)")`获取索引为3的`<li>`元素
:gt(index)	获取索引大于index的元素	`$("li:gt(3)")`获取索引大于3的所有`<li>`元素
:lt(index)	获取索引小于index的元素	`$("li:lt(3)")`获取索引小于3的所有`<li>`元素
:not(seletor)	获取除指定的选择器外的其他元素	`$("li:not(li:eq(3))")`获取除索引为3外的所有`<li>`元素
:focus	匹配当前获取焦点的元素	`$("input:focus")`匹配当前获取焦点的`<input>`元素
:animated	匹配所有正在执行动画效果的元素	`$("div:not(:animated)")`匹配当前没有执行动画的`<div>`元素
:target	选择由文档URI的格式化识别码表示的目标元素	若URI为`http://example.com/#foo`，则`$("div:target")`将获取`<div id="foo">`元素

4 内容选择器

根据元素的内容完成指定元素的获取。例如，获取所有元素内容不为空的<li>等。

选择器	功能描述	示例
:contains(text)	获取内容包含text文本的元素	`$("li:contains('js')")`获取内容中含“js”的`<li>`元素
:empty	获取内容为空的元素	`$("li:empty")`获取内容为空的`<li>`元素
:has(selector)	获取内容包含指定选择器的元素	`$("li:has('a')")`获取内容中含`<a>`元素的所有`<li>`元素
:parent	获取内容不为空的元素（特殊）	`$("li:parent")`获取内容不为空的`<li>`元素

5 可见性选择器

为了方便开发，jQuery中还提供了可见或隐藏元素的获取。

选择器	功能描述	示例
:hidden	获取所有隐藏元素	`$("li:hidden")`获取所有隐藏的`<li>`元素
:visible	获取所有可见元素	`$("li:visible")`获取所有可见的`<li>`元素

当指定元素的display设置为none时，可以通过“:hidden”获取隐藏的元素。
当指定元素的display设置为block时，可以通过“:visible”获取可见的元素。

6 属性选择器

根据元素的属性获取指定元素的方式。如获取class值为current的<div>元素等。

选择器	功能描述	示例
[attr]	获取具有指定属性的元素	`$("div[class]")`获取含有class属性的所有`<div>`元素
[attr=value]	获取属性值等于value的元素	`$("div[class=current]")`获取class等于current的所有`<div>`元素
[attr!=value]	获取属性值不等于value的元素	`$("div[class!=current]")`获取class不等于current的所有`<div>`元素
[attr^=value]	获取属性值以value开始的元素	`$("div[class^=box]")`获取class属性值以box开始的所有`<div>`元素
[attr$=value]	获取属性值以value结尾的元素	`$("div[class$=er]")`获取class属性值以er结尾的所有`<div>`元素
[attr*=value]	获取属性值包含value的元素	`$("div[class*='-']")`获取class属性值中含有“-”符号的所有`<div>`元素
[attr~=value]	获取元素的属性值包含一个value，以空格分隔	`$("div[class~='box']")`获取class属性值等于“box”或通过空格分隔并含有box的`<div>`元素，如“t box”
`[attr1][attr2]...[attrN]`	获取同时拥有多个属性的元素	`$("input[id][name$='usr']")`获取同时含有id属性和属性值以usr结尾的name属性的`<input>`元素

7 子元素选择器

选择器	功能描述
:nth-child(index/even/odd/公式)	索引index默认从1开始，匹配指定index索引、偶数、奇数、或符合指定公式（如2n，n默认从0开始）的子元素
:first-child	获取第一个子元素
:last-child	获取最后一个子元素
:only-child	如果当前元素是唯一的子元素，则匹配
:nth-last-child(index/even/odd/公式)	选择所有它们父元素的第n个子元素。计数从最后一个元素开始到第一个
:nth-of-type(index/even/odd/公式))	选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素
:first-of-type	选择所有相同的元素名称的第一个子元素
:last-of-type	选择所有相同的元素名称的最后一个子元素
:only-of-type	选择所有没有兄弟元素，且具有相同的元素名称的元素
:nth-last-of-type(index/even/odd/公式)	选择所有它们的父级元素的第n个子元素，计数从最后一个元素到第一个

带有“of-type” 与未带有“of-type”项的选择器有一定的区别。

8 表单选择器

选择器	功能描述
:input	获取页面中的所有表单元素，包含`<select>`以及`<textarea>`元素
:text	选取页面中的所有文本框
:password	选取所有的密码框
:radio	选取所有的单选按钮
:checkbox	选取所有的复选框
:submit	获取submit提交按钮
:reset	获取reset重置按钮
:image	获取`type="image"`的图像域
:button	获取button按钮，包括`<button></button>`和`type="button"`
:file	获取`type="file"`的文件域
:hidden	获取隐藏表单项
:enabled	获取所有可用表单元素
:disabled	获取所有不可用表单元素
:checked	获取所有选中的表单元素，主要针对radio和checkbox
:selected	获取所有选中的表单元素，主要针对select

选择器$("input")与$(":input")虽然都可以获取表单项，但是它们表达的含义有一定的区别，前者仅能获取表单标签是<input>的控件，后者则可以同时获取页面中所有的表单控件，包括表单标签是<select>以及<textarea>的控件。

陌巷偷客

关注

8
点赞
踩
58

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现折叠菜单。三个版本，写法。

效果如图所示：点击后展开菜单。同等高度，上面是因为截图原因。代码如下：版本1：练习用选择器写样式。代码很丑，后面有好看的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo.
复制链接

扫一扫