Javascript 如何扩展此CSS列表？

我已经让我的菜单扩展了一级，但不知道如何让它第二次扩展。我做错了什么

HTML:

Javascript:

function hideAll() {
    var navList = document.getElementById("nav");
    for (var i=0; i<navList.childNodes.length; i++) {
        var node = navList.childNodes[i];
        if (node.tagName == "LI") {
            node.className = node.className.replace(new RegExp("\s?active", "i"), "");
        }
    }
}

window.onload = function () {
    var navList = document.getElementById("nav");
    for (var i=0; i<navList.childNodes.length; i++) {
        var node = navList.childNodes[i];
        if (node.tagName == "LI") {
            node.onclick = function() {
                hideAll();
                this.className += " active";
            }
        }
    }
}

函数hideAll（）{
var navList=document.getElementById（“nav”）；
for（var i=0；i
childNodes
只包含元素的直接子元素——您还需要递归每个节点的
childNodes

我强烈建议您使用像jQuery这样的框架(http://jquery.com)要使代码更简单，请执行以下操作：

我认为问题在于，您只在列表中的第一级节点之间循环。您需要遍历每个后续列表的子元素，并添加一个onClick函数以使其不断扩展。
另一方面，我真诚地认为像jQuery这样的库在这种情况下会让您的生活更轻松。我同意@pimvdb的观点，jQuery使您更轻松你的生活轻松多了。谢谢你的代码Andy。但是，我不懂jQuery，也没有多少时间学习它。你的代码不工作，我不知道如何根据我的需要编辑它。有没有快速修复方法？我已经更新了我的JSFIDLE，在你最初的问题中使用了CSS，只做了一些小的修改。它似乎按照预期工作。再次，比太多了！它在你的JSFIDLE中工作得很好，但是，当我尝试将它放到我的网站上时，它失败了！我将你的代码放在“menu.js”中，然后在加载jquery后直接将其加载到我的页面中。所有的HTML/CSS都是相同的。我做错了什么？好吧，使用
中的脚本，
\nav
元素不存在最佳实践是将脚本放在文档的末尾，在
之前。或者，您可以将上面的JavaScript代码包装在
$（function（）{/*put-ondomready-code-here*/}）；
中，当DOM就绪时，jQuery将执行它（所有页面元素都可用于操作）.太棒了。非常感谢您提供的代码/指针。非常感谢。我想我必须找时间学习jQuery:p
ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
    background-color: #53BF58;
    width: 10em;
}

li ul {
    display: none;
    background-color: #86EF8A;
}

li.active ul {
    display: block;
}

li ul li ul {
    display: none;
    background-color: #86EF8A;
}

li ul li.active ul {
    display:block;
}

function hideAll() {
    var navList = document.getElementById("nav");
    for (var i=0; i<navList.childNodes.length; i++) {
        var node = navList.childNodes[i];
        if (node.tagName == "LI") {
            node.className = node.className.replace(new RegExp("\s?active", "i"), "");
        }
    }
}

window.onload = function () {
    var navList = document.getElementById("nav");
    for (var i=0; i<navList.childNodes.length; i++) {
        var node = navList.childNodes[i];
        if (node.tagName == "LI") {
            node.onclick = function() {
                hideAll();
                this.className += " active";
            }
        }
    }
}

$('#nav').delegate('li', 'click', function() {
    var self = $(e.target), //get a reference to the clicked element
        active = self.parents().andSelf() //select all li's that should be active
            .addClass('active'); //and activate them
    $('#nav .active').not(active).removeClass('active'); //deactivate others  
});