菜单栏展开关闭效果（1）

如图所示，点击留言区管理，此一级菜单下的内容会展开，其他一级菜单内容相应关闭。

    <div class="teach-slide-l">
                    <ul class="slide-l-ul" id="list">
                        <li class="lis">
                            <a href="index.html">网站首页</a>
                            <ul class="slide-a-ul">
                            </ul>
                        </li>
                        <li class="lis">
                            <a href="javascript:void(0);">个人信息</a>
                            <ul class="slide-a-ul t-d">
                                <li>信息查询修改</li>
                                <!--<li>教学资源管理</li>-->
                            </ul>
                        </li>
                        <li class="lis">
                            <a href="javascript:void(0);">习题管理</a>
                            <ul class="slide-a-ul">
                                <li>习题查询</li>
                                <!--<li>作业查改</li>-->
                            </ul>
                        </li>
                        <li class="lis">
                            <a href="javascript:void(0);">留言区管理</a>
                            <ul class="slide-a-ul">
                                <li>查看留言</li>
                                <li>回答问题</li>
                            </ul>
                        </li>
                        <li class="lis">
                            <a href="javascript:void(0);">公告栏列表</a>
                            <ul class="slide-a-ul t-d">
                                <li>公告栏</li>
                                <!--<li>教学资源管理</li>-->
                            </ul>
                        </li>
                        <li class="lis">
                            <a href="javascript:void(0);">学生信息列表</a>
                            <ul class="slide-a-ul t-d">
                                <li>信息查询</li>
                                <!--<li>教学资源管理</li>-->
                            </ul>
                        </li>
                        <li class="lis">
                            <a href="javascript:void(0);">退出系统</a>
                            <ul class="slide-a-ul">
                            </ul>
                        </li>
                    </ul>
                </div>

window.onload = function (){
    var oUl = document.getElementById('list');
    var aH2 = oUl.getElementsByTagName('a');
    var aUl = oUl.getElementsByTagName('ul');
    var aLi = null;
    var arrLi = [];
    for( var i=0; i<aH2.length; i++ ){
        aH2[i].index = i;
        aH2[i].onclick = function (){
            for( var i=0; i<aH2.length; i++ ){
                if( i != this.index ){
                    aUl[i].style.display = 'none';
                }
            }    
            if( this.className == '' ){
                aUl[this.index].style.display = 'block';
            } else {
                aUl[this.index].style.display = 'none';
            }
        };
    }
    for( var i=0; i<aUl.length; i++ ){
        aLi = aUl[i].getElementsByTagName('li');
        for( var j=0; j<aLi.length; j++ ){
            arrLi.push( aLi[j] );
        }
    }
};

.teach-slide-l{
    display: inline-block;
    padding:1%;
    13%;
    /*height:500px;*/
    border: 1px dashed #55A532;
}
.lis{
    background: #AFEEEE;
    margin-bottom: 8px;
    text-align: center;
}
.slide-l-ul a{
    height:40px;
    line-height: 40px;
    color:#000000;
}
.slide-a-ul{
    display: none;
}
.slide-a-ul li{
    line-height: 30px;
    background: #FFFFFF;
    border-bottom: 1px dashed #333;
}