定制开发小程序JQuery实现折叠菜单。三个版本，写法。

定制开发小程序效果如图所示：

 定制开发小程序点击后展开菜单。同等高度，定制开发小程序上面是因为截图原因。

代码如下：

版本1：定制开发小程序练习用选择器写样式。代码很丑，定制开发小程序后面有好看的。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.     </style>
  15. </head>
  16.  
  17. <body>
  18.     <div class="box">
  19.         <div class="item">
  20.             <div class="item01 click01" id="click01">信息管理</div>
  21.             <div class="same hiddenitem01" id="hidden01">
  22.                 <div class="hiddencontent01">未读信息</div>
  23.                 <div class="hiddencontent01">已读信息</div>
  24.                 <div class="hiddencontent01">信息列表</div>
  25.             </div>
  26.         </div>
  27.         <div class="item">
  28.             <div class="item01">商品管理</div>
  29.         </div>
  30.         <div class="item">
  31.             <div class="item01 click02" id="click02">用户管理</div>
  32.             <div class="same hiddenitem02" id="hidden02">
  33.                 <div class="hiddencontent01">权限设置</div>
  34.                 <div class="hiddencontent01">用户列表</div>
  35.                 <div class="hiddencontent01">重置密码</div>
  36.             </div>
  37.         </div>
  38.     </div>
  39.     <script src="../js/jquery.min.js"></script>
  40.     <script>
  41.         $('.box').css({
  42.             'margin': '200px auto 0',
  43.             'padding- left': '10px',
  44.             'width': '200px',
  45.             'font-size': '18px',
  46.             'box- sizing': 'border-box'
  47.  
  48.         });
  49.         $('.item01').css({
  50.             'height': '40px',
  51.             'padding-left': '8px',
  52.             'line-height': '40px',
  53.             'background-color': 'rgb(12, 66, 92)',
  54.             'color': '#fff',
  55.             'margin-bottom': '2px',
  56.         });
  57.  
  58.         $('.same').css({
  59.             'display': 'none',
  60.             'width': '100 %',
  61.             'background-color': '#fff',
  62.             'color': 'black',
  63.             'font-size': '14px',
  64.             'padding-left': '8px',
  65.         });
  66.         $('.hiddencontent01').css({
  67.             'width':'100 %',
  68.             'background-color':'#fff',
  69.             'color':'black',
  70.             'font-size':'16px',
  71.             'height':'40px',
  72.             'padding-left':'8px',
  73.             'line-height':'40px',
  74.             'margin-bottom':'4px',
  75.         });
  76.        $('#click01').click(function () {
  77.             $('.hiddenitem01').css({
  78.                'display':'block',
  79.                 'border': '1px solid black',
  80.            })
  81.         })
  82.         $('#click02').click(function () {
  83.            $('.hiddenitem02').css({
  84.                 'display': 'block',
  85.                 'border': '1px solid black',
  86.             })
  87.         })
  88.         
  89.  
  90.     </script>
  91. </body>
  92.  
  93. </html>

版本二：定制开发小程序好看了一点。

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     *{
  10.       margin: 0;
  11.       padding: 0;
  12.     }
  13.     body{
  14.       height: 100%;
  15.       overflow: hidden;
  16.       background-color: #324252;
  17.       font-size: 18px;
  18.     }
  19.     ul,li{
  20.       list-style: none;
  21.     }
  22.     .list{
  23.       width: 400px;
  24.       margin: 200px auto;
  25.       background-color: #3e5165;
  26.       box-shadow: 0px 0px 25px #00000070;
  27.     }
  28.     .item{
  29.       width: 350px;
  30.       /* height: 50px; */
  31.       line-height: 50px;
  32.       padding-left: 45px;
  33.       color: #FFF;
  34.       font-weight: bold;
  35.       /* box-sizing: border-box; */
  36.     }
  37.     .item:hover{
  38.       color: #46efa4;
  39.       cursor: pointer;
  40.     }
  41.     .inner-item{
  42.       margin-left: -45px;
  43.       padding-left: 45px;
  44.     }
  45.     .item+.item,.inner-item{
  46.       border-top: 1px solid #324252;
  47.     }
  48.     .inner-list{
  49.       display: none;
  50.       color: rgb(138, 143, 240);
  51.       font-size: 14px;
  52.       font-weight: normal;
  53.     }
  54.     .show{
  55.       display: block;
  56.     }
  57.   </style>
  58. </head>
  59. <body>
  60.   <ul class="list">
  61.     <li class="item">我的
  62.       <ul class="inner-list">
  63.         <li class="inner-item">发布</li>
  64.         <li class="inner-item">图片</li>
  65.       </ul>
  66.     </li>
  67.     <li class="item">邮件
  68.       <ul class="inner-list">
  69.         <li class="inner-item">写邮箱</li>
  70.         <li class="inner-item">草稿箱</li>
  71.         <li class="inner-item">已发送</li>
  72.         <li class="inner-item">垃圾箱</li>
  73.       </ul>
  74.     </li>
  75.     <li class="item">设置
  76.       <ul class="inner-list">
  77.         <li class="inner-item">密码</li>
  78.         <li class="inner-item">语音</li>
  79.         <li class="inner-item">关于</li>
  80.         <li class="inner-item">版本更新</li>
  81.       </ul>
  82.     </li>
  83.   </ul>
  84.   <script src="../js/jquery.min.js"></script>
  85.   <script>
  86.     $(".item").each((index,element)=>{
  87.       $(element).click(function(){
  88.         if($(this).find(".inner-list").hasClass('show')){
  89.           $(this).find(".inner-list").removeClass('show')
  90.         }else{
  91.           $(".item").each((index,element)=>{
  92.             if($(element).find(".inner-list").hasClass('show')){
  93.               $(element).find(".inner-list").removeClass("show")
  94.             }
  95.           })
  96.           $(this).find(".inner-list").addClass("show")
  97.         }
  98.       })
  99.     })
  100.  
  101.   </script>
  102. </body>
  103. </html>

版本三：定制开发小程序更便于理解和简单易懂：

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0
  13.         }
  14.  
  15.         ul,
  16.         li {
  17.             list-style: none;
  18.         }
  19.  
  20.         .box {
  21.             width: 1000px;
  22.             margin: 20px auto 0;
  23.         }
  24.  
  25.         .menu-box {
  26.             width: 150px;
  27.             display: flex;
  28.             flex-direction: column;
  29.         }
  30.  
  31.         .menu-item {
  32.             border-bottom: 1px solid #fff;
  33.         }
  34.  
  35.         .menu-item.show {
  36.             border-bottom: none;
  37.         }
  38.  
  39.         .menu-item>.item-title {
  40.             height: 40px;
  41.             padding: 0 10px;
  42.             color: #fff;
  43.             font-size: 16px;
  44.             line-height: 40px;
  45.             background-color: #515e7b;
  46.         }
  47.  
  48.         .menu-item>.item-list {
  49.             display: none;
  50.             padding: 10px;
  51.             border: 1px solid #515e7b;
  52.             border-top: none;
  53.             background-color: #fff;
  54.         }
  55.  
  56.         .menu-item.show>.item-list {
  57.             display: block;
  58.         }
  59.  
  60.         .menu-item .list-item {
  61.             font-size: 12px;
  62.             color: #515e7b;
  63.             line-height: 2;
  64.         }
  65.     </style>
  66. </head>
  67.  
  68. <body>
  69.  
  70.     <div class="box">
  71.         <!-- 折叠菜单 -->
  72.         <div class="menu-box">
  73.             <div class="menu-item jq-menu-item">
  74.                 <div class="item-title">信息管理</div>
  75.                 <ul class="item-list">
  76.                     <li class="list-item">未读信息</li>
  77.                     <li class="list-item">已读信息</li>
  78.                     <li class="list-item">信息列表</li>
  79.                 </ul>
  80.             </div>
  81.             <div class="menu-item jq-menu-item">
  82.                 <div class="item-title">商品管理</div>
  83.                 <ul class="item-list">
  84.                     <li class="list-item">未读信息</li>
  85.                     <li class="list-item">已读信息</li>
  86.                     <li class="list-item">信息列表</li>
  87.                 </ul>
  88.             </div>
  89.             <div class="menu-item jq-menu-item">
  90.                 <div class="item-title">用户管理</div>
  91.                 <ul class="item-list">
  92.                     <li class="list-item">权限设置</li>
  93.                     <li class="list-item">用户列表</li>
  94.                     <li class="list-item">重置密码</li>
  95.                 </ul>
  96.             </div>
  97.         </div>
  98.     </div>
  99.  
  100.     <script src="../js/jquery.min.js"></script>
  101.     <script>
  102.         $('.jq-menu-item').click(function () {
  103.             $(this).siblings().removeClass('show');
  104.             $(this).toggleClass('show');
  105.         });
  106.     </script>
  107. </body>
  108.  
  109. </html>

类似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>的控件。

 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发