原生js实现展开收缩菜单

avatar 2015年9月12日12:13:42 1

一个非常常用菜单收缩的效果。上源代码:

CSS:

1
2
3
4
5
6
7
8
9
body,h2,ul{padding:0margin:0;font-size:12px;}
li{list-style:none;}
#menu{width:148pxheight:158px;margin:50px auto;}
#menu li{ border-bottom:1px solid #a5b5cebackground:#8c9cb5border-top:1px solid #a5b5ce;cursor:pointer;}
#menu h2text-indent:30pxheight:24pxcolor:#FFFline-height:24px;}
#menu .list{ display:nonebackground#eee;}
#menu .list li{background:yellow; padding2px 15px;}
.active{background:red;}
.active11{background:#8c9cb5;}

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
window.onload=function(){
    var oMenu = document.getElementById('menu');
    var aH2 = oMenu.getElementsByTagName('h2');
    var aUl = oMenu.getElementsByTagName('ul');
    for(var i=0; i<aH2.length; i++){
        aH2[i].index = i;
        aH2[i].onclick = function(){
            for(var i=0; i<aUl.length; i++){
                if(i==this.index){
                    if(aUl[this.index].style.display == 'block'){
                        aUl[this.index].style.display = 'none';  
                        aH2[this.index].className="active11";
                    }else{
                         
                        aUl[this.index].style.display = 'block';
                        aH2[this.index].className="active";
                    }  
                }else{
                    aUl[i].style.display = 'none';
                    aH2[i].className="active11";   
                     
                }
            }
        };     
    }
};

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<ul id="menu">
    <li>
        <h2>菜单一</h2>
        <ul class="list" style="display: none;">
            <li><span></span>一的内容</li>
            <li><span></span>一的内容</li>
            <li><span></span>一的内容</li>
            <li><span></span>一的内容</li>
        </ul>
    </li>
    <li>
        <h2>菜单二</h2>
        <ul class="list">
            <li><span></span>二的内容</li>
            <li><span></span>二的内容</li>
            <li><span></span>二的内容</li>
            <li><span></span>二的内容</li>
        </ul>
    </li>
    <li>
        <h2>菜单三</h2>
        <ul class="list">
            <li><span></span>三的内容</li>
            <li><span></span>三的内容</li>
            <li><span></span>三的内容</li>
            <li><span></span>三的内容</li>
        </ul>
    </li>
     <li>
        <h2>菜单四</h2>
        <ul class="list">
            <li><span></span>四的内容</li>
            <li><span></span>四的内容</li>
            <li><span></span>四的内容</li>
            <li><span></span>四的内容</li>
        </ul>
    </li>
</ul>
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar janezhengmin 0

      想说学习的教程可以稍微的加点备注解释吗