HTML 使用 js 中dom对象属性实现树形菜单（通过修改class）

Main12138

于 2021-01-07 12:10:11 发布

阅读量380

点赞数 1

分类专栏：大前端

本文链接：https://blog.csdn.net/weixin_51311218/article/details/112306701

版权

javascript html

大前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

使用dom对象属性实现树形菜单（通过修改class）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用dom对象属性实现树形菜单（通过修改class）</title>

    <style>
        .none {
            display: none;
        }
    </style>

    <script>

        // 通过唯一id开启开关菜单功能
        function change(id) {
            var temp = document.getElementById(id);
            if (temp.className == "none") {
                temp.classList.remove("none");
            } else {
                temp.className = "none";
            }
        }

    </script>
</head>

<body>

    <a href="javascript:change('d1')">国产动漫</a><br>
    <div id="d1" class="none">
        <ul>
            <li>喜羊羊与灰太狼</li>
            <li>熊出没</li>
            <li>镇魂街</li>
        </ul>
    </div>

    <a href="javascript:change('d2')">日本动漫</a>
    <div id="d2" class="none">
        <ul>
            <li>缘之空</li>
            <li>日在校园</li>
            <li>寒蝉鸣泣之时</li>
        </ul>
    </div>
</body>

</html>

Main12138

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML 使用 js 中dom对象属性实现树形菜单（通过修改class）

使用dom对象属性实现树形菜单（通过修改class）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用dom对象属性实现树形菜单（通过修改class）</title&gt
复制链接

扫一扫