多级菜单

Version 1 目标：基本三级菜单展开/收回 ，+/- 图标互换

Step1 多级菜单 html+css （随意）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width">
 6   <title>JS Bin</title>
 7 </head>
 8 <body>
 9 <a href="#" class="first-menu" onclick="changeMenu('first-menu')">first menu</a>
10 <ul class="first">
11   <li>f-1</li>
12   <li>
13     <a href="#" class="second-menu" onclick="changeMenu('second-menu')">second menu</a>
14     <ul class="second">
15       <li>
16         <a href="#" class="third-menu" onclick="changeMenu('third-menu')">third menu</a>
17         <ul class="third">
18           <li>t-1</li>
19           <li>t-2</li>
20           <li>t-3</li>
21         </ul>        
22       </li>
23       <li>s-1</li>
24       <li>s-2</li>
25     </ul>
26   </li>
27   <li>f-3</li>
28 </ul>
29 </body>
30 </html>
HTML
 1 ul{
 2   list-style:none;
 3   padding:0;
 4   margin:0;
 5 }
 6 .first{
 7   background:lightblue;
 8   width:200px;
 9 }
10 .first-menu{
11   background:lightblue;
12 }
13 .first-menu:after{
14   content:'\2796';
15   float:right;
16 }
17 .second{
18   background:orange;
19 }
20 .second-menu{
21   background:orange;
22 }
23 .second-menu:after{
24   content:'\2796';
25   float:right;
26 }
27 li{
28   display:block;
29   width:200px;
30 }
31 .third{
32   background:yellow;
33 }
34 .third-menu{
35   background:yellow;
36 }
37 .third-menu:after{
38   content:'\2796';
39   float:right;
40 }
41 a{
42   display:block;
43   text-decoration:none;
44   color:#000;
45   width:200px;
46   height:30px;
47   line-height:30px;
48   border:1px solid #000;
49 }
50 .active:after{
51   content:'\02795';
52   float:right;
53 }
CSS

Step2 js初步实现

思路：创建一个函数，传入className，以此定位到点击的目标上，判断点击到的元素的下一个同辈元素的可见性，如果不可见，则让其可见，否则让其可见

 1 function changeMenu(className){
 2   var menu=document.getElementsByClassName(className);
 3   var floor=menu[0].nextElementSibling;
 4   if(floor.style.display==='none'){
 5     floor.style.display='block';
 6     menu[0].classList.remove('active');
 7   }
 8   else{
 9     floor.style.display='none';
10     menu[0].classList.add('active');
11   }
12 }

 

Version 2 目标：this取代className

Step1 html改为：

Step2 js改为：

 1 function changeMenu(elem){  
 2   var floor=elem.nextElementSibling;
 3   if(floor.style.display==='none'){
 4     floor.style.display='block';
 5     elem.classList.remove('active');
 6   }
 7   else{
 8     floor.style.display='none';
 9     elem.classList.add('active');
10   }
11 }

 

Version 3 目标：分离html和javascript

Step1 html改为：

Step2 js改为：

 1 var first=document.getElementsByClassName('first-menu')[0];
 2 var second=document.getElementsByClassName('second-menu')[0];
 3 var third=document.getElementsByClassName('third-menu')[0];
 4 first.onclick=function(){
 5   changeMenu(first);
 6 }
 7 second.onclick=function(){
 8   changeMenu(second);
 9 }
10 third.onclick=function(){
11   changeMenu(third);
12 }
13 function changeMenu(elem){  
14   var floor=elem.nextElementSibling;
15   if(floor.style.display==='none'){
16     floor.style.display='block';
17     elem.classList.remove('active');
18   }
19   else{
20     floor.style.display='none';
21     elem.classList.add('active');
22   }
23 }

 

Version 4 目标：缩减代码量

Step1 js改为：

 1 var menus=document.getElementsByTagName('a');
 2 for(var i=0;i<menus.length;i++){
 3   menus[i].onclick=function(){
 4     changeMenu(this);
 5   }
 6 }
 7 function changeMenu(elem){  
 8   var floor=elem.nextElementSibling;
 9   if(floor.style.display==='none'){
10     floor.style.display='block';
11     elem.classList.remove('active');
12   }
13   else{
14     floor.style.display='none';
15     elem.classList.add('active');
16   }
17 }

 

Version 5 目标：Jquery实现

Step1 js改为：

1 $(function(){
2   $('a').each(function(){
3     $(this).click(function(){
4       $(this).next().toggle();
5       $(this).toggleClass('active');
6     });
7   });
8 });

OR

1 $(function(){
2   var menus=$('a');
3   $('a').each(function(){
4     $(this).on('click',function(){
5       $(this).next().toggle();
6       $(this).toggleClass('active');
7     });
8   });
9 });

 

posted @ 2017-10-24 17:50  CodingSwallow  阅读(590)  评论(0)  编辑  收藏  举报