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