如何展开这个CSS列表

How do I expand this CSS list?

本文关键字：CSS 列表 何展开      更新时间：2023-09-26

我已经将菜单扩展了一级，但不知道如何再次扩展。我做错了什么？

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

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

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

相关文章：