首页>>导航菜单>>jQuery垂直手风琴多级下拉菜单(2021-05-31)

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

jQuery垂直手风琴多级下拉菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <ul class="cd-accordion-menu animated">  
  2.     <li class="has-children">  
  3.         <input type="checkbox" name ="group-1" id="group-1" checked>  
  4.         <label for="group-1">Group 1</label>  
  5.   
  6.         <ul>  
  7.             <li class="has-children">  
  8.                 <input type="checkbox" name ="sub-group-1" id="sub-group-1">  
  9.                 <label for="sub-group-1">Sub Group 1</label>  
  10.   
  11.                 <ul>  
  12.                     <li><a href="#0">Image</a></li>  
  13.                     <li><a href="#0">Image</a></li>  
  14.                     <li><a href="#0">Image</a></li>  
  15.                 </ul>  
  16.             </li>  
  17.             <li class="has-children">  
  18.                 <input type="checkbox" name ="sub-group-2" id="sub-group-2">  
  19.                 <label for="sub-group-2">Sub Group 2</label>  
  20.   
  21.                 <ul>  
  22.                     <li class="has-children">  
  23.                         <input type="checkbox" name ="sub-group-level-3" id="sub-group-level-3">  
  24.                         <label for="sub-group-level-3">Sub Group Level 3</label>  
  25.   
  26.                         <ul>  
  27.                             <li><a href="#0">Image</a></li>  
  28.                             <li><a href="#0">Image</a></li>  
  29.                         </ul>  
  30.                     </li>  
  31.                     <li><a href="#0">Image</a></li>  
  32.                 </ul>  
  33.             </li>  
  34.             <li><a href="#0">Image</a></li>  
  35.             <li><a href="#0">Image</a></li>  
  36.         </ul>  
  37.     </li>  
  38.   
  39.     <li class="has-children">  
  40.         <input type="checkbox" name ="group-2" id="group-2">  
  41.         <label for="group-2">Group 2</label>  
  42.   
  43.         <ul>  
  44.             <li><a href="#0">Image</a></li>  
  45.             <li><a href="#0">Image</a></li>  
  46.         </ul>  
  47.     </li>  
  48.   
  49.     <li class="has-children">  
  50.         <input type="checkbox" name ="group-3" id="group-3">  
  51.         <label for="group-3">Group 3</label>  
  52.   
  53.         <ul>  
  54.             <li><a href="#0">Image</a></li>  
  55.             <li><a href="#0">Image</a></li>  
  56.         </ul>  
  57.     </li>  
  58.   
  59.     <li class="has-children">  
  60.         <input type="checkbox" name ="group-4" id="group-4">  
  61.         <label for="group-4">Group 4</label>  
  62.   
  63.         <ul>  
  64.             <li class="has-children">  
  65.                 <input type="checkbox" name ="sub-group-3" id="sub-group-3">  
  66.                 <label for="sub-group-3">Sub Group 3</label>  
  67.   
  68.                 <ul>  
  69.                     <li><a href="#0">Image</a></li>  
  70.                     <li><a href="#0">Image</a></li>  
  71.                 </ul>  
  72.             </li>  
  73.             <li><a href="#0">Image</a></li>  
  74.             <li><a href="#0">Image</a></li>  
  75.         </ul>  
  76.     </li>  
  77. </ul>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_907.html