zoukankan      html  css  js  c++  java
  • 菜单栏展开关闭效果(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;
    }
  • 相关阅读:
    struts2_文件上传和下载
    struts2_方法拦截器
    struts2_Action之间的重定向传参
    struts2_全局的拦截器,拦截用户非法登陆
    Hibernate入门心得
    struts2_异常页面处理
    设计师小法器:字体大管家
    IE6,IE7下设置body{overflow:hidden;}失效Bug【转】
    子层的margintop属性应用到父层上的解决方法
    jQuery CSS选择器nthchild
  • 原文地址:https://www.cnblogs.com/yongwang/p/6767046.html
Copyright © 2011-2022 走看看