三级目录导航

代码
在线演示
学习资源推荐：https://blog.csdn.net/qq_42813491/article/details/90213353
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级目录导航</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        font-size: 14px;
    }

    aside {
        background-color: #34495e;
        height: 100%;
        float: left;
        width: 200px;
    }

    aside ul {
        text-align: center;
        list-style: none;
        position: relative;
        top: 30%;
    }

    aside ul li {
        width: 100px;
        padding-left: 25%;
        margin: 4px;
    }

    aside ul li p {
        width: 100px;
        color: #000;
        font-weight: bold;
        cursor: pointer;
    }

    aside ul li p:hover {
        color: gold;
    }

    aside ul li a {
        display: block;
        width: 100px;
        text-decoration: none;
        color: #ccc;
    }

    aside ul li a:hover {
        color: #2ecc71;
    }

    aside div.all {
        position: relative;
        top: 24%;
        left: 20%;
        font-weight: bold;
    }

    aside div.all span {
        cursor: pointer;
    }

    aside div.all span:hover {
        color: white;
    }
    </style>
</head>

<body>
    <aside>
        <div class="all">
            <span id="openAll">展开全部</span>
            ||
            <span id="closeAll">关闭全部</span>
        </div>
        <ul>
            <li>
                <p>部门管理</p>
                <ul class="isShow">
                    <li><a href="#">添加部门</a></li>
                    <li>
                        <p>查询部门</p>
                        <ul class="isShow">
                            <li><a href="#">A组</a></li>
                            <li><a href="#">B组</a></li>
                            <li><a href="#">C组</a></li>
                            <li><a href="#">D组</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <p>日志记录</p>
                <ul class="isShow">
                    <li><a href="#">月报</a></li>
                    <li><a href="#">周报</a></li>
                    <li><a href="#">日报</a></li>
                </ul>
            </li>
        </ul>
    </aside>
    <script type="text/javascript">
    //ul的展开与关闭的业务函数
    function isOpen(p, ul) {
        var open = true;
        p.onclick = function() {
            if (open) {
                ul.style.display = "none";
                open = false;
            } else {
                ul.style.display = "block";
                open = true;
            }
        }
    }

    //获取全部p标签
    var pArr = document.querySelectorAll("p");
    //获取全部带有isShow类名的ul
    var ulArr = document.querySelectorAll("ul.isShow");

    //获取id为openAll的span
    var openAll = document.querySelector("#openAll");
    //获取id为closeAll的span
    var closeAll = document.querySelector("#closeAll");

    // 遍历，循环注册事件
    for (var i = 0; i < ulArr.length; i++) {
        isOpen(pArr[i], ulArr[i]);
    }

    //打开所有
    openAll.onclick = function() {
        // 遍历，循环注册事件
        for (var i = 0; i < ulArr.length; i++) {
            ulArr[i].style.display = "block";
        }
    }

    //关闭所有
    closeAll.onclick = function() {
        // 遍历，循环注册事件
        for (var i = 0; i < ulArr.length; i++) {
            ulArr[i].style.display = "none";
        }
    }
    </script>
</body>

</html>
在线演示

https://pxpobz.coding.io/
http://lengyuexin.coding.me/categories/
_冷月心
发布了450 篇原创文章 · 获赞 787 · 访问量 16万+
他的留言板关注
三级目录导航

三级目录导航

代码

在线演示

猜你喜欢
