Javascript Menu tree not displaying properly

Question

I am pretty sure that the solution is very simple but I have been at this for hours without being able to work it out. Sometimes we just need an extra pair of eyes.

I have made a function to display a menu in Javascript. It works by clicking on the menu item, if that item has children, the link doesn't work but shows the children instead. This should happen all the way down the tree. There is no problem with that part, the problem is that when on items children are visible, clicking on another item in the main menu should make the children of the other item disappear. This is where I am having problems.

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