入れ子リストの非アクティブ兄弟を非表示

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

トライクリックハンドラ上のドキュメントを追加し、それはあなたのリストの外だと答えのためにそう要素を非表示にした場合