Как мне расширить этот список CSS? - PullRequest
Новая
       2

Как мне расширить этот список CSS?

0 голосов
/ 24 мая 2011

Я получил возможность расширить свое меню на один уровень, но не могу понять, как заставить его расширяться во второй раз. Что я делаю не так?

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

Ответы [ 2 ]

1 голос
/ 24 мая 2011

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  
});
0 голосов
/ 24 мая 2011

Я думаю, что проблема в том, что вы только просматриваете первый уровень узлов в вашем списке. Вам необходимо просмотреть дочерние элементы каждого последующего списка и добавить функцию onClick, чтобы он продолжал расширяться.

...