• 3级菜单


    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            *{
                margin:0;
                padding:0;
            }
    
            ul{
                list-style: none;
            }
    
            body{
                background: #f5f5f5;
                font-family: "Microsoft YaHei";
                font-size: 12px;
            }
            .wrap{
                311px;
                margin:50px auto;
                padding:10px;
                border:1px #ddd solid;
                background: #fff;
            }
    
            .item{
                margin-bottom: 10px;
            }
    
            .item .title{
                height: 43px;
                background: url("images/zakladka.png") 0 0 no-repeat;
                padding-left:33px; 
                line-height: 43px;
                color: #333;
                cursor: pointer;
            }
    
            .item .title span{
                display: block;
                26px;
                height: 37px;
                float: right;
                margin:3px 0 0 0;
                background: url("images/off.png") 0 0  no-repeat;
            }
    
            .item ul{
                margin:5px 0;
                padding: 0 10px 0 33px;
                overflow: hidden;
                transition:all 0.6s ease;
            }
    
            .item ul li{
                color:#8f9d4c;
                line-height:26px;
                cursor: pointer;
            }
    
            .item ul li:hover{
                text-decoration: underline;
            }
    
            .sublist{
                padding-left: 33px;
                /*height:0;*/
                overflow: hidden;
                transition:all 0.6s ease;
            }
    
            .item ul li span{
                display: block;
                26px;
                height: 26px;
                float: right;
                background: url("images/off.png") 0 -8px  no-repeat;
            }
    
        </style>
        <script>
            window.onload = function(){
    
                var uls = document.querySelectorAll("ul");
                var titles = document.querySelectorAll(".title");
                var ulh = [];
                var last;
                
                var subTile = document.querySelector(".sublist-title");
                var subSpan = document.querySelector(".arrow");
                var sublist = document.querySelector(".sublist");
                var subHeight = sublist.offsetHeight;
    
                //3级菜单显示隐藏
                sublist.style.height = 0;
                subTile.isShow = false;
    
                subTile.addEventListener("click",function(){
                    var parent = this.parentNode;
    
                    if(!this.isShow){    
                        var p_height = parent.offsetHeight;
    
                        sublist.style.height = subHeight + "px";
                        parent.style.height = p_height + subHeight + "px";
                        this.isShow = true;
    
                        changeArrow(subSpan,true);
                    }else{
                        var p_height = parent.offsetHeight;
    
                        sublist.style.height = 0;
                        parent.style.height = p_height - subHeight + "px";
                        this.isShow = false;
    
                        changeArrow(subSpan,false);
                    }        
                });
    
                //二级菜单
                for(var i = 0; i < uls.length;i++){
                    var height = uls[i].offsetHeight;
    
                    uls[i].style.height = 0;
                    uls[i].isShow = false;
                    ulh.push(height);
                }
    
                for(var i = 0; i < titles.length; i++){
                    
                    (function(i){
                        titles[i].addEventListener("click",function(){
    
                            if(last && last != uls[i]){
                                last.style.height = 0;
                                last.isShow = false;
                            }
    
                            if(!uls[i].isShow){
                                uls[i].style.height = ulh[i] + "px";
                                uls[i].isShow = true;        
                            }else{
                                sublist.style.height = 0;
                                sublist.isShow = false;
                                uls[i].style.height = 0;
                                uls[i].isShow = false;
                            }    
    
                                
                            
                            last = uls[i];
                        });
                    })(i);    
                }
                
                //修改箭头
                function changeArrow(elem,state){
                    var str;
                    if(!state){
                        str = "url('images/off.png') 0 -5px no-repeat"; 
                    }else{
                        str = "url('images/on.png') 0 -8px no-repeat";
                    }
                    elem.style.background = str;
                }    
            }
    
        </script>
    
    </head>
    <body>
    
        <div class="wrap">
    
            <div class="item">
                <div class="title"><span></span>Item1</div>
                <ul>
                    <li>subitem1</li>
                    <li class="sublist-title">
                        <span class="arrow"></span>
                        subitem2
                        <div class="sublist">
                            <p>subItem1_1</p>
                            <p>subItem1_2</p>
                            <p>subItem1_3</p>
                            <p>subItem1_4</p>
                        </div>
                    </li>
                    <li>subitem3</li>
                    <li>subitem4</li>
                    <li>subitem5</li>
                </ul>
            </div>
    
            <div class="item">
                <div class="title"><span></span>Item1</div>
                <ul>
                    <li>subitem1</li>
                    <li>subitem2</li>
                    <li>subitem3</li>
                    <li>subitem4</li>
                </ul>
            </div>
            <div class="item">
                <div class="title"><span></span>Item1</div>
                <ul>
                    <li>subitem1</li>
                    <li>subitem2</li>
                    <li>subitem3</li>
                </ul>
            </div>
        </div>
    
    </body>
    </html>

  • 相关阅读:
    恼人的CON(转)
    CINRAD/SB 多普勒天气雷达
    如何将两个栅格数据图层求和并求并集
    javascript设置asp.net程序开始运行时ie最大化显示
    ArcGIS Engine中数据的加载(转载)
    发现了一个arcgis engine的一个bug
    带余除法
    第二数学归纳法
    concat和concat_ws()区别及MySQL的几个实用字符串函数
    oracle查询语句大全
  • 原文地址:https://www.cnblogs.com/dexin/p/6337010.html
Copyright © 2020-2023  润新知