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

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>