点击第一级显示二，三级，然后点击二级，或者三级又会显示相应里面的子内容．这种的要怎么写ＪＳ

可以直接使用 <detail> 。不过 Firefox 不兼容，不过考虑到国内 Firefox 的占有率，其实问题也不大。第二个方案考虑使用 :checked + <label> ，可以参考我这篇文章：纯CSS实现多选组件和这个讲堂：写 CSS 也要开脑洞：万能的 :checked + label 。最后，如果非要用 JS 的话，下面是一段简单的范例，需要 jQuery: <div class="collapse"> <a name="level-1" class="toggle">第一级</a> <div class="details"> </div> $('.collapse").on('click', '.toggle', function (e) { $(e.currentTarget).parent().children().filter('.details').toggle(); });

请教下如何用JS实现这种多层级的DIV显示与隐藏？

我这儿提供一个思路例子，仅是一个例子，例中给元素添加了自定义属性data-level，虽然没有使用上，但是是可以根据这个自定义属性去控制显示隐藏和确定具体层级的！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style lang="css">
        * {
            margin: 0;
            padding: 0;
        }        
        .nodisplay {
            display: none;
        }        
        h3 {
            cursor: pointer;
        }       
        ul {
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <p>点击下面的标题可展开：</p>
    <ul id="nav_tree">
        <li>
            <h3 data-level="0">第一级</h3>
            <ul class="nodisplay">
                <li>
                    <h3 data-level="0-0">第二级</h3>
                    <ul class="nodisplay">
                        <li>
                            <h3 data-level="0-0-0">第三级</h3>
                            <ul class="nodisplay">
                                <li>第三级内容1</li>
                                <li>第三级内容2</li>
                                <li>第三级内容3</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <h3 data-level="1">我也是第一级</h3>
            <ul class="nodisplay">
                <li>
                    <h3 data-level="1-0">我也是第二级1</h3>
                    <ul class="nodisplay">
                        <li>
                            <h3 data-level="1-0-0">我也是第三级</h3>
                            <ul class="nodisplay">
                                <li>第三级内容1</li>
                                <li>第三级内容2</li>
                                <li>第三级内容3</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <h3 data-level="1-1">我也是第二级2</h3>
                    <ul class="nodisplay">
                        <li>
                            <h3 data-level="1-1-0">我也是第三级</h3>
                            <ul class="nodisplay">
                                <li>第三级内容1</li>
                                <li>第三级内容2</li>
                                <li>第三级内容3</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script>
        $(function() {
            $("#nav_tree li h3").on("click", function(e) {
                //获取点击标题的下一个元素节点
                var $dom = e.target.nextElementSibling;
                $($dom).toggleClass("nodisplay");
            });
        });
    </script>
</body>
</html>

希望能给你提供一个解决问题的思路！

请教下如何用JS实现这种多层级的DIV显示与隐藏？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？