Дерево меню Javascript не отображается правильно

Question

Я уверен, что решение очень просто, но я был в этом часом, не имея возможности его обработать. Иногда нам нужна дополнительная пара глаз.

Я создал функцию для отображения меню в Javascript. Он работает, нажимая на элемент меню, если у этого элемента есть дети, ссылка не работает, но отображает детей. Это должно происходить полностью вниз по дереву. Нет проблем с этой частью, проблема в том, что когда на элементах видны дети, нажатие на другой элемент в главном меню должно привести к тому, что дети другого элемента исчезнут. Здесь я испытываю проблемы.

Html:

<div class="nav nav-default"> 
    <ul class="site-menu wm-site-menu"> 
    <li id="page_9526"><a href="/wm/f/foretaget" target="_parent"  title="Företaget">Företaget</a></li> 
    <li id="page_9529"><a href="/wm/f/produkter" target="_parent" title="Produkter">Produkter</a> 
     <ul class="" style="display: none;"> 
     <li id="page_9547"><a href="/wm/f/traktorer" target="_parent" title="Traktorer">Traktorer</a></li> 
     <li id="page_9548"><a href="/wm/f/lastmaskiner" target="_parent" title="Lastmaskiner">Lastmaskiner</a> 
      <ul class="visible" style="display: block;"> 
      <li id="page_9727"><a href="/wm/f/kompaktlastare" target="_parent" title="Kompaktlastare">Kompaktlastare</a></li> 
      <li id="page_9723"><a href="/wm/f/hjullastare" target="_parent" title="Hjullastare">Hjullastare</a></li> 
      <li id="page_9724"><a href="/wm/f/teleskophjullastare" target="_parent" title="Teleskophjullastare">Teleskophjullastare</a></li> 
      <li id="page_9725"><a href="/wm/f/teleskoplastare" target="_parent" title="Teleskoplastare">Teleskoplastare</a></li> 
      </ul> 
     </li> 
    </ul> 
    </li> 
    <li id="page_9533"><a href="/wm/f/begagnat" target="_parent" title="Begagnat">Begagnat</a> 
    <ul class="" style="display: none;"> 
     <li id="page_9534"><a href="/wm/f/maskiner" target="_parent" title="Maskiner">Maskiner</a></li> 
     <li id="page_9535"><a href="/wm/f/begagnade-traktorer" target="_parent" title="Traktorer">Traktorer</a></li> 
    </ul> 
    </li> 
    <li class="wm-menu-active" id="page_9515"><a href="/wm/f/verkstad" target="_parent" title="Verkstad">Verkstad</a></li> 
    <li id="page_9532"><a href="/wm/f/butik-och-reservdelar" target="_parent" title="Butik &amp; Reservdelar">Butik &amp; Reservdelar</a></li> 
    <li id="page_9525"><a href="/wm/f/kontakt" target="_parent" title="Kontakt">Kontakt</a>   
    </li> 
</ul> 
</div> 

Javascript:

$(document).ready(function(){ 
    $('.nav-default li').each(function(){ 

    $(this).click(function(e){ 
     if($(this).find('ul').length > 0){ 
     e.preventDefault(); 
     $('.site-menu li ul li').on('click', function(e){ 
      e.stopPropagation(); 
     }); 

     if($(this).children('ul').hasClass('visible')){   
      $(this).children('ul').removeClass('visible'); 
      $(this).children('ul').hide(); 
     } 
     else{ 
      var child_with_children = $(this).children('ul'); 
      child_with_children.show(); 
      child_with_children.addClass('visible'); 
     } 
     } 
    }); 
    }); 
}); 

Answer 1

http://jsfiddle.net/98CxJ/

$(document).ready(function(){ 
    $('.nav-default li').each(function(){ 

    $(this).click(function(e){ 
      $(this).siblings().children('ul').fadeOut().removeClass('visible'); 
     if($(this).find('ul').length > 0){ 
     e.preventDefault(); 
     $('.site-menu li ul li').on('click', function(e){ 
      e.stopPropagation(); 
     }); 

     if($(this).children('ul').hasClass('visible')){   
      $(this).children('ul').removeClass('visible'); 
      $(this).children('ul').fadeOut(); 
     } 
     else{ 
      var child_with_children = $(this).children('ul'); 
      child_with_children.fadeIn(); 
      child_with_children.addClass('visible'); 
     } 
     } 
    }); 
    }); 
});