10 aprire e chiudere i sottomenu al clic Jquery

Question

Ho un menu principale che visualizzerà i sottomenu con un evento click in jquery (il client voleva essere invece al passaggio del mouse) quindi l'ho fatto funzionare comunque non riesco ancora a capire una cosa : Ho il menu ei sottomenu che funzionano correttamente, quindi quando clicco su "news" il sottomenu scorre in modo corretto e quando faccio clic su "news" si chiude indietro, tuttavia se dopo aver aperto le notizie 'sottomenu e faccio clic su "risorse" il compare il rispettivo sottomenu ma il sottomenu 'news' rimane aperto, voglio che il sottomenu precedente si chiuda quando si fa clic su un'altra voce di menu o fuori dall'area del menu principale qualche idea? ecco cosa ho ricevuto:

<ul id="MainMenu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li> 
       <a href="#">News</a> 
       <ul class="noJS"> 
       <li><a href="#">sub menu 1</a></li> 
       <li><a href="#">sub menu 2</a></li> 
       <li><a href="#">sub menu 3</a></li> 
       <li><a href="#">sub menu 4</a></li> 
       <li><a href="#">sub menu 5</a></li> 
       <li><a href="#">sub menu 6</a></li> 
      </ul>       
     </li> 
     <li><a href="#">Jobs</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#">Admin</a></li> 
     <li> 
      <a href="#">Resources</a> 
      <ul class="noJS"> 
       <li><a href="#">sub menu 1</a></li> 
       <li><a href="#">sub menu 2</a></li> 
       <li><a href="#">sub menu 3</a></li> 
       <li><a href="#">sub menu 4</a></li> 
       <li><a href="#">sub menu 5</a></li> 
       <li><a href="#">sub menu 6</a></li> 
      </ul> 
     </li> 
     <li class="lastChild"><a href="#">New Button</a></li> 
    </ul> 

e jQuery:

$(function(){ 
$('#MainMenu').find('> li').click(function(){ 
    $(this).find('ul') 
    .stop(true, true).slideToggle(400); 
    return false;  
});  
}); 

Answer 1

provare qualcosa di simile

$(function() { 
    $('#MainMenu > li').click(function(e) { // limit click to children of mainmenue 
     var $el = $('ul',this); // element to toggle 
     $('#MainMenu > li > ul').not($el).slideUp(); // slide up other elements 
     $el.stop(true, true).slideToggle(400); // toggle element 
     return false; 
    }); 
    $('#MainMenu > li > ul > li').click(function(e) { 
     e.stopPropagation(); // stop events from bubbling from sub menu clicks 
    }); 
});​ 

http://jsfiddle.net/Ssu32/

Answer 2

Just Add questa riga nel codice

$('#MainMenu > li').not(this).find('ul').slideUp(); 

DI CODICE COMPLETO

$('#MainMenu').find('> li').click(function() { 
    $('#MainMenu > li').not(this).find('ul').slideUp(); 
    $(this).find('ul').stop(true, true).slideToggle(400); 
    return false; 
});​ 

Check Fiddle