折叠菜单功能的实现

折叠菜单功能的实现

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

实现效果

点击按钮前
点击按钮后

实现代码

<!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等属性在代码中均有介绍;
菜鸟一个,欢迎一起探讨问题。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页