折叠菜单功能的实现

最新推荐文章于 2021-12-08 09:34:04 发布

劭兮劭兮

最新推荐文章于 2021-12-08 09:34:04 发布

阅读量1.4k

点赞数 3

分类专栏： JS常用效果实现笔记文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_44694201/article/details/110545408

版权

笔记同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JS常用效果实现

4 篇文章 0 订阅

订阅专栏

折叠菜单功能的实现

在日常生活中，我们经常会遇到折叠菜单，今天一起来看看它的实现原理吧！

实现效果

点击按钮前
点击按钮后

实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>折叠菜单</title>

    <style>
        li ul {
            display: none;
        }
        
        li.expand>ul {
            display: block;
        }
    </style>

</head>

<body>

    <div id="menu">
        <ul>
            <li>
                <a href="http://www.baidu.com" target="_block">内容管理</a>
                <ul>
                    <li>
                        <a href="http://www.qq.com" target="_block">发布内容</a>
                    </li>
                    <li>
                        <a href="http://www.163.com" target="_block">增加内容</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <script>
        var menu = document.querySelector("#menu");
        // 事件委托
        menu.addEventListener("click", function(e) {

            // 隐藏默认效果
            // e.preventDefault();

            /*
            target属性获取鼠标所点击的标签
            var target = e.target; (此处显示三个a标签，即点击的地方)
            parentNode属性是Element或者Node的属性，获取其上一结点
            parent = target.parentNode; (此处显示三个li标签,即a标签的父结点li)
            console.log(parent);  
            */
            // 上述代码可以用下面代码代替：
            // console.log(e.target.parentNode);

            var parent = e.target.parentNode;
            if (parent.querySelectorAll("ul").length > 0) {
                if (parent.classList.contains("expand")) {
                    parent.classList.remove("expand");
                } else {
                    parent.classList.add("expand");
                }
                e.preventDefault();
            }
        });
    </script>

</body>

</html>

本例子通过事件委托，完成了折叠菜单的功能，target , parentNode等属性在代码中均有介绍；
菜鸟一个，欢迎一起探讨问题。

劭兮劭兮

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
折叠菜单功能的实现

折叠菜单功能的实现在日常生活中，我们经常会遇到折叠菜单，今天一起来看看它的实现原理吧！实现效果实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>折叠菜单<
复制链接

扫一扫

专栏目录