js层级菜单

最新推荐文章于 2023-02-04 18:37:18 发布

yangtz_1999

最新推荐文章于 2023-02-04 18:37:18 发布

阅读量999

点赞数

分类专栏：前端文章标签： javascript 层级菜单

本文链接：https://blog.csdn.net/Young_Fee/article/details/79040561

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

先看特效：
这里写图片描述

style:

<style>
        ul{
            padding: 0;
            margin: 0;
        }
        .hide{
            display: none;
        }
        .menu{
            width: 200px;
            height: 500px;
            background-color: gray;
            border: 2px solid #333;
        }
        .menu .title{
            background-color: blue;
            cursor: pointer;
        }
        .menu .content{
            background-color: white;
        }
    </style>

body:



    <div class="menu">
        <div class="item">
            <div class="title" onclick="Show(this);">菜单一</div>
            <div class="content hide">
                <ul>
                    <li>内容1</li>
                    <li>内容1</li>
                    <li>内容1</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <!--arg.下一个标签nex-->
            <div class="title" onclick="Show(this);">菜单二</div>
            <div class="content hide">
                <ul>
                    <li>内容2</li>
                    <li>内容2</li>
                    <li>内容2</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="Show(this);">菜单三</div>
            <div class="content hide">
                <ul>
                    <li>内容3</li>
                    <li>内容3</li>
                    <li>内容3</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="Show(this);">菜单四</div>
            <div class="content hide">
                <ul>
                    <li>内容4</li>
                    <li>内容4</li>
                    <li>内容4</li>
                </ul>
            </div>
        </div>
    </div>

js:


<script>
    function Func(arg,a2){
        console.log(arg,a2);
    }
     function Func1(arg){
        console.log(arg);
    }
    function Show(arg){
        //arg当前菜单
        //console.log(arg);
        arg.nextElementSibling.classList.remove('hide');//remove当前的hide属性
        var father = arg.parentElement;
        var sons = father.parentElement.children;
        for (var i=0;i<sons.length;i++){
            var current_ele = sons[i];
            if(current_ele == father){

            }else{
                current_ele.children[1].classList.add('hide');
            }
        }
    }
</script>