menu con mở và đóng trên Jquery

Question

Tôi có một menu chính sẽ hiển thị menu con với một sự kiện nhấp chuột trong jquery (khách hàng muốn được nhấp chuột thay vì di chuột) vì vậy tôi đã làm việc tuy nhiên tôi vẫn không thể tìm ra một điều : Tôi có menu và menu phụ hoạt động bình thường nên khi tôi nhấp vào "news", menu con sẽ trượt xuống độc đáo và khi tôi nhấp lại vào "news" thì nó sẽ đóng lại, tuy nhiên nếu sau khi mở menu phụ, tôi nhấp vào "resources" menu con tương ứng xuất hiện nhưng menu con tin tức vẫn mở, tôi muốn menu con trước đó đóng lại khi nhấp vào một mục menu khác hoặc bên ngoài vùng menu chính bất kỳ ý tưởng nào? đây là những gì tôi nhận:

<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> 

và jquery:

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

Answer 1

Hãy thử một cái gì đó như thế này

$(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 Thêm dòng này vào mã của bạn

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

ĐẦY ĐỦ MÃ

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

Check Fiddle