Question

我已经将菜单扩展了一个级别，但无法弄清楚如何让它扩展第二次。我做错了什么？

HTML：

<ul id="nav">
    <li><a href="#">Root</a>
        <ul>
            <li><a href="#">Option 1</a>
                <ul>
                    <li><a href="">Link3</a></li>
                    <li><a href="">Lin4</a></li>
                    <li><a href="">Link5</a></li>
                    <li><a href="">Link6</a></li>
                </ul>
            </li>
            <li><a href="#">Option2</a>
                <ul>
                    <li><a href="">Link3</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS：

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;
}

使用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";
            }
        }
    }
}

Answer 1

childNodes仅包含元素的直接子元素 - 您还需要递归每个节点的childNodes。

我强烈建议您使用jQuery（http://jquery.com）这样的框架来简化代码： http://jsfiddle.net/jDEhU/5/

$('#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  
});

Answer 2

我认为问题在于您只是循环遍历列表中的第一级节点。您需要遍历每个后续列表的子元素，并添加onClick函数以使其保持扩展。

如何扩展此CSS列表？

2 个答案: