İç içe geçmiş listenin etkin olmayan kardeşlerini gizle

Question

Benim aracım sadece salt JavaScript. Ben JSON'dan inşa edilmiştir iç içe bir liste var:

Ayrıca

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

bu iç içe listenin bazı unsurları bazı olay dinleyicileri var:

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; 

Soru: Ben bir yere tıkladığınızda nasıl yapılır listeden tüm yuvalanmış öğeler gizlenmelidir.

Answer 1

deneyin tıklama işleyicisi bir doküman ekleme ve buna listenizin dışında olduğunu ve yanıt için öylesine öğeleri gizlemek eğer