3级菜单

Posted 2020-08-28 程序员入门到放弃
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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{
            width: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;
            width: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;
            width: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>
以上是关于3级菜单的主要内容，如果未能解决你的问题，请参考以下文章
隐藏/显示不同片段的操作栏选项菜单项
多片段层次结构中的菜单膨胀问题
如何在 Bootstrap 中制作 3 级折叠菜单？
添加片段时的 FlyOut 菜单设计问题
创建片段的新实例时菜单未膨胀
如何将片段目标绑定到底部导航栏中的菜单项？