隐藏嵌套列表的不活动兄弟姐妹

Question

我的工具只是纯JavaScript。我有一个由JSON构建的嵌套列表：

    function buildList(data, isSub){
    var html = (isSub)?'<div class="nested">':''; // Wrap with div if true
    html += '<ul id="mainnav">';
    for(item in data){
        html += '<li>';
        if(typeof(data[item].sub) === 'object'){ // An array will return 'object'
            if(isSub){
                html += '<a href="' + data[item].link + '">' + data[item].name + '</a>';
            } else {
                html += data[item].id; // Submenu found, but top level list item.
            }
            html += buildList(data[item].sub, true); // Submenu found. Calling recursively same method (and wrapping it in a div)
        } else {
            html += data[item].id // No submenu
        }
        html += '</li>';
    }
    html += '</ul>';
    html += (isSub)?'</div>':'';
    return html;
}
(function(){
    // Json config for menu
    var JSON = {
    menu: [
        {id: 'First',sub: [
            {name: 'lorem ipsum 0-0',link: '0-0', sub: null},
            {name: 'lorem ipsum 0-1',link: '0-1', sub: null},
            {name: 'lorem ipsum 0-2',link: '0-2', sub: null}
            ]
        },
        {id: 'Second',sub: null},
        {id: 'Third',sub: [
            {name: 'lorem ipsum 2-0',link: '2-0', sub: null},
            {name: 'lorem ipsum 2-1',link: '2-1', sub: null},
            {name: 'lorem ipsum 2-2',link: '2-2', sub: [
                {name: 'lorem ipsum 2-2-0',link: '2-2-0', sub: null},
                {name: 'lorem ipsum 2-2-1',link: '2-2-1', sub: null},
                {name: 'lorem ipsum 2-2-2',link: '2-2-2', sub: null},
                {name: 'lorem ipsum 2-2-3',link: '2-2-3', sub: null},
                {name: 'lorem ipsum 2-2-4',link: '2-2-4', sub: null},
                {name: 'lorem ipsum 2-2-5',link: '2-2-5', sub: null},
                {name: 'lorem ipsum 2-2-6',link: '2-2-6', sub: null}
            ]},
            {name: 'lorem ipsum 2-3',link: '2-3', sub: null},
            {name: 'lorem ipsum 2-4',link: '2-4', sub: null},
            {name: 'lorem ipsum 2-5',link: '2-5', sub: null}
            ]
        },
        {id: 'Fourth',sub: null},
         {id: 'Five',sub: [
            {name: 'lorem ipsum 0-5',link: '0-5', sub: null},
            {name: 'lorem ipsum 0-6',link: '0-6', sub: null},
            {name: 'lorem ipsum 0-7',link: '0-7', sub: null}
            ]
        }
    ]
}    
    document.write(buildList(JSON.menu,false));
})()

此外，我在这个嵌套列表的某些元素上有一些事件侦听器：

function rollup()
{
    // Check we're working with a DOM compliant browser
    if (document.getElementById && document.createElement)
    {
        var objMenu = document.getElementById('mainnav');

        var objNested = objMenu.getElementsByClassName('nested');

        // Hide each of the nested unordered list
        for (var i=0; i<objNested.length; i++){
            objNested[i].style.display = 'none';
        }
        // Adding events on every child of mainMenu
        var childrenOfMenu = objMenu.children;
        // On click event
        for (var i=0; i<childrenOfMenu.length; i++){
            childrenOfMenu[i].addEventListener('click', function () {
                var listChildren = this.children;
                for (var i = 0; i < listChildren.length; i++) {
                    childrenOfMenu[i].style.display = 'none';
                    listChildren[i].style.display = 'block';
                    console.log(listChildren[i].parentNode.nextElementSibling);
                    listChildren[i].parentNode.nextElementSibling.style.display = 'none';
                    // this.parentNode.style.display = 'none';
                }
            });
            // Mouse over event
            childrenOfMenu[i].addEventListener('mouseover', function () {
                var listChildren = this.children;
                for (var i = 0; i < listChildren.length; i++) {
                    listChildren[i].style.display = 'block';
                    // this.children.nextElementSibling.style.display = 'none';
                }
            });
             // When mouse out of list
            // childrenOfMenu[i].addEventListener('mouseout', function () {
            //  var listChildren = this.children;
            //  for (var i = 0; i < listChildren.length; i++) {
            //      listChildren[i].style.display = 'none';
            //  }
            // });
        }
    }
}
window.onload=rollup;

问题:当我单击列表之外的某个位置时，如何做所有嵌套元素都必须隐藏。

Answer 1

尝试在单击处理程序上添加一个文档，当它触发时，检查事件的目标，以确保它在列表之外，如果是，则隐藏元素