一个菜鸟的互联网技术分享博客
您的位置: 主页 > jQuery垂直手风琴多级下拉菜单代码
advertisement

jQuery垂直手风琴多级下拉菜单代码

HTML部分如下:

  1. <!doctype html>  
  2. <html lang="zh">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  7. <title>jQuery垂直手风琴多级下拉菜单代码</title>  
  8.   
  9. <link rel="stylesheet" href="css/reset.css">  
  10. <link rel="stylesheet" href="css/style.css">  
  11.   
  12.   
  13.   
  14. </head>  
  15. <body>  
  16. <ul class="cd-accordion-menu animated">  
  17.     <li class="has-children">  
  18.         <input type="checkbox" name ="group-1" id="group-1" checked>  
  19.         <label for="group-1">一级导航1</label>  
  20.   
  21.         <ul>  
  22.             <li class="has-children">  
  23.                 <input type="checkbox" name ="sub-group-1" id="sub-group-1">  
  24.                 <label for="sub-group-1">一级导航1-1</label>  
  25.   
  26.                 <ul>  
  27.                     <li><a href="#0">一级导航1-1-1</a></li>  
  28.                     <li><a href="#0">一级导航1-1-2</a></li>  
  29.                     <li><a href="#0">一级导航1-1-3</a></li>  
  30.                 </ul>  
  31.             </li>  
  32.             <li class="has-children">  
  33.                 <input type="checkbox" name ="sub-group-2" id="sub-group-2">  
  34.                 <label for="sub-group-2">一级导航1-2</label>  
  35.   
  36.                 <ul>  
  37.                     <li class="has-children">  
  38.                         <input type="checkbox" name ="sub-group-level-3" id="sub-group-level-3">  
  39.                         <label for="sub-group-level-3">一级导航1-2-1</label>  
  40.   
  41.                         <ul>  
  42.                             <li><a href="#0">一级导航1-2-1-1</a></li>  
  43.                             <li><a href="#0">一级导航1-2-1-2</a></li>  
  44.                         </ul>  
  45.                     </li>  
  46.                     <li><a href="#0">一级导航1-2-2</a></li>  
  47.                 </ul>  
  48.             </li>  
  49.             <li><a href="#0">一级导航1-3</a></li>  
  50.             <li><a href="#0">一级导航1-4</a></li>  
  51.         </ul>  
  52.     </li>  
  53.   
  54.     <li class="has-children">  
  55.         <input type="checkbox" name ="group-2" id="group-2">  
  56.         <label for="group-2">一级导航2</label>  
  57.   
  58.         <ul>  
  59.             <li><a href="#0">一级导航2-1</a></li>  
  60.             <li><a href="#0">一级导航2-2</a></li>  
  61.         </ul>  
  62.     </li>  
  63.   
  64.     <li class="has-children">  
  65.         <input type="checkbox" name ="group-3" id="group-3">  
  66.         <label for="group-3">一级导航3</label>  
  67.   
  68.         <ul>  
  69.             <li><a href="#0">一级导航3-1</a></li>  
  70.             <li><a href="#0">一级导航3-2</a></li>  
  71.         </ul>  
  72.     </li>  
  73.   
  74.     <li class="has-children">  
  75.         <input type="checkbox" name ="group-4" id="group-4">  
  76.         <label for="group-4">一级导航4</label>  
  77.   
  78.         <ul>  
  79.             <li class="has-children">  
  80.                 <input type="checkbox" name ="sub-group-3" id="sub-group-3">  
  81.                 <label for="sub-group-3">一级导航4-1</label>  
  82.   
  83.                 <ul>  
  84.                     <li><a href="#0">一级导航4-1-1</a></li>  
  85.                     <li><a href="#0">一级导航4-1-</a></li>  
  86.                 </ul>  
  87.             </li>  
  88.             <li><a href="#0">一级导航4-2</a></li>  
  89.             <li><a href="#0">一级导航4-3</a></li>  
  90.         </ul>  
  91.     </li>  
  92. </ul>  
  93.   
  94. <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>  
  95. <script src="js/main.js"></script>  
  96.   
  97.   
  98. </body>  
  99. </html>  

js部分如下:

  1. $(function(){  
  2.     var accordionsMenu = $('.cd-accordion-menu');  
  3.   
  4.     if( accordionsMenu.length > 0 ) {  
  5.           
  6.         accordionsMenu.each(function(){  
  7.             var accordion = $(this);  
  8.             //直接修改 input[type="checkbox"] 的值  
  9.             accordion.on('change', 'input[type="checkbox"]', function(){  
  10.                 var checkbox = $(this);  
  11.                 console.log(checkbox.prop('checked'));  
  12.                 ( checkbox.prop('checked') ) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300) : checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);  
  13.             });  
  14.         });  
  15.     }  
  16. });  

整个文件下载链接

zhangren.online
上一篇:清除input框type为password的时候浏览器上面的账号记忆
下一篇:es6常用数组操作及技巧汇总

您可能喜欢

​jquery文字左右无缝滚动

​jquery文字左右无缝滚动

​前端base64转换成图片

​前端base64转换成图片

​常用函数

​常用函数

​input中输入大于0的正整数

​input中输入大于0的正整数

回到顶部