Как свернуть подменю при нажатии другого элемента родительского меню с помощью JQuery

Question

Просто захотелось немного убрать мозги с этой проблемой. У меня есть настраиваемое меню с помощью jquery. В настоящее время я использую функцию slideToggle() для анимации сложения с помощью щелчка меню, он работает для самостоятельного закрытия и открытия подменю. Но я пытаюсь выяснить способ сглаживания подменю при открытии другого. Любые предложения/советы были бы весьма признательны.

Jquery

<script> 
    function initMenu() { 
     $('#menu ul').hide(); 
     $('#menu li a').click(

     function() { 
     $(this).next().slideToggle('normal') 

     }); 

    } 
    $(document).ready(function() {initMenu();}); 
    </script> 

HTML

<ul id="menu"> 

    <li><a href="#">Home</a></li> 
    <li><a href="#">In the news</a> 

     <ul> 
      <li><a href="#">Youtube</a></li> 
      <li><a href="#">Blog</a></li> 

     </ul> 
    </li> 

    <li><a href="#">Who's Who?</a> 
     <ul> 
      <li><a href="#">Youtube</a></li> 
      <li><a href="#">Tackle Hunger Tackle Hunger</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Services Offered</a></li> 

</ul> 

Спасибо,

Andre

Answer 1

Here is a working example.

function initMenu() { 
    $('#menu ul').hide(); 
    $('#menu > li > a').on('click', function() { 
     $('#menu ul').slideUp(); 
     $(this).next().slideDown(); 
    }); 
} 
$(document).ready(initMenu); 

Answer 2

function initMenu() { 
    $('#menu ul').hide(); 
    $('#menu li a').click(

    function() { 
     $('#menu ul').hide('normal'); 
     $(this).next().slideToggle('normal'); 

}); 

} 
$(document).ready(function() { 
    initMenu(); 
}); 

Демо: http://jsfiddle.net/ex2z5/

Answer 3

Положите класс ваших пунктов меню, то есть «Главное меню», а другой для ваших пунктов подменю т.е. «подменю» и сделать функцию, чтобы закрыть все «подменю» когда клик появляется в элементах «главного меню».