伸缩导航-竖向可收缩、展开的导航

实现效果：第一次点击展开，再点击收起。

js代码：

function contract(closeClass, openClass, contBox){
    function getElementsByClass(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
            node = document;
        if ( tag == null )
            tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
        for (i = 0, j = 0; i < elsLen; i++) {
            if ( pattern.test(els[i].className) ) {
                classElements[j] = els[i];
                j++;
            }
        }
        return classElements;
    }    
    function toggleDisplay(element){
        if (element.style.display != 'block'){
            element.style.display = 'block';
        } else{
            element.style.display = 'none';
        }
    }
    function toggleClass(element, newClass){
        var classOld = element.className;
        if (classOld.indexOf(newClass) > -1){
            element.className = classOld.replace(newClass, '')
        } else{
            element.className = classOld + " " + newClass;
            
        }
    }   
    var navArray = getElementsByClass(closeClass),
        boxArray = getElementsByClass(contBox),
        len =   navArray.length;  
    for (var i = 0; i < len; i++){(function(i){
            navArray[i].onclick = function(){
                toggleClass(this, openClass);
                toggleDisplay(boxArray[i]);
            }                            
        })(i)
    }  
}
contract('btn_close', 'btn_open', 'cont_box');

使用说明：收缩函数contract的3个参数按顺序分别是
closeClass：一级导航"闭合"时样式类名；
openClass：一级导航"打开"时样式类名；
contBox：二级导航"框"样式类名（收缩隐藏的框）。

html代码：

<div class="btn_close btn_open">导航一</div>
<ul class="cont_box" style="display:block">
    <li><a href="#">&bull; 二级导航内容链接</a></li>
    <li><a href="#">&bull; 二级导航内容链接</a></li>
    <li><a href="#">&bull; 二级导航内容链接</a></li>
    <li><a href="#">&bull; 二级导航内容链接</a></li>
    <li><a href="#">&bull; 二级导航内容链接</a></li>
</ul>
<div class="btn_close">导航二</div>
<ul class="cont_box">
    <li><a href="#">&bull; 二级导航内容链接</a></li>
    <li><a href="#">&bull; 二级导航内容链接</a></li>
</ul>
<div class="btn_close">导航三</div>
<ul class="cont_box">
    <li><a href="#">&bull; 二级导航内容链接</a></li>
</ul>
<div class="btn_close">导航四</div>
<ul class="cont_box">
    <li><a href="#">&bull; 二级导航内容链接</a></li>
    <li><a href="#">&bull; 二级导航内容链接</a></li>
</ul>

css代码：

body,div,ul,li{ margin:0; padding:0;}
ul{list-style:none;}
.btn_open,.btn_close{ width:226px; height:20px; padding:6px 0 0 10px; margin:5px auto 0; font:bold 14px "宋体"; color:#fff; background-color:#666; cursor:pointer;}
.btn_open{ background-color:#069!important; color:#f00!important}
.cont_box{ display:none; width:236px; margin:0 auto; padding-bottom:10px; background-color:#b4ebeb;}
.cont_box li{ padding:5px 5px 0;}
.cont_box li a{ color:#000;}