js实现导航菜单树形结构

最新推荐文章于 2024-06-24 17:20:12 发布

胡萝卜大王驾到通通闪开

最新推荐文章于 2024-06-24 17:20:12 发布

阅读量1k

点赞数

分类专栏：曾经学习的时候写的一些很烂的笔记文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_44157964/article/details/104176874

版权

曾经学习的时候写的一些很烂的笔记同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

小案例

10 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul id="menu">
        <li>胡歌
            <ul>
                <li>电影</li>
                <li>电视剧
                    <ul>
                        <li>琅琊榜</li>
                        <li>伪装者</li>
                        <li>猎场</li>
                        <li>仙剑奇侠传</li>
                    </ul>
                </li>
                <li>话剧</li>
                <li>音乐</li>
            </ul>
        </li>
        <li>朱一龙</li>
        <li>肖战</li>
        <li>毛不易</li>
    </ul>
    <button>按钮</button>
    <script>
        //第一种方法------------使用li添加侦听,会在内存中添加存储,消耗内存
        var lis=document.getElementsByTagName("li");
        for(var i=0;i<lis.length;i++){
            lis[i].addEventListener("click",clickHandler);
        }

        function clickHandler(e){
            if(!this.firstElementChild) return;//如果li没有子元素,就不执行
            e.stopPropagation();//li阻止冒泡事件,要不然会使父元素的li也会执行
            // console.log(Boolean(this.bool))
            //第一次点击bool是false,点击执行li子元素为none
            if(!this.bool) this.firstElementChild.style.display="none";
            // 第二次点击bool为true,执行下行代码,是li子元素设置为block
            else this.firstElementChild.style.display="block";

            this.bool=!this.bool;
        }



 		// 第二种方法-----------------事件委托
        //使用父元素添加侦听,可以减少事件侦听,可以减少内存存储
        var menu=document.querySelector("#menu");
        menu.addEventListener("click",clickHandler);

        function clickHandler(e){
            console.log(e)
            if(e.target.constructor!==HTMLLIElement)return;//如果不是li,就不执行
            if(!e.target.firstElementChild) return;//如果li没有子元素,就不执行
            e.stopPropagation();//li阻止冒泡事件,要不然会使父元素的li也会执行

            if(!e.target.bool) e.target.firstElementChild.style.display="none";
            else e.target.firstElementChild.style.display="block";
            e.target.bool=!e.target.bool;
        }

    </script>
</body>

</html>