原生JS实现的二级目录（DOM）

最新推荐文章于 2021-06-15 14:54:55 发布

原创

最新推荐文章于 2021-06-15 14:54:55 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#DOM原生JS

这篇博客展示了如何利用原生JavaScript和DOM操作创建一个二级目录系统。当点击一级目录时，相应的二级目录会显示或隐藏。通过监听点击事件，实现了不同一级目录下二级目录内容的动态加载和切换。示例代码中详细地描述了点击每个一级目录时如何更新显示的内容。

HTML代码：
<div class="DropDownLeft">
    <div id ="container" >请选择</div>
    <div id ="content">
        <ul>
            <li id="contentList1">健康</li>
            <li id="contentList2">教育</li>
            <li id="contentList3">文化</li>
            <li id="contentList4">生活</li>
            <li id="contentList5">娱乐</li>
        </ul>
    </div>
</div>
<div class="DropDownRight">
    <div id="containerSecond">请选择</div>
    <div id="contentRight">
        <ul id="contentRightList">
        </ul>
    </div>
</div>