使用 JQuery 单击另一个父菜单项时如何折叠子菜单答案

【问题标题】：How to collapse a submenu when another parent menu item is clicked with JQuery使用 JQuery 单击另一个父菜单项时如何折叠子菜单
【发布时间】：2012-01-19 00:34:58
【问题描述】：

只是想稍微思考一下这个问题，我正在使用 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>

谢谢，

安德烈

【问题讨论】：

标签： jquery html

【解决方案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);

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

为您的菜单项（即“主菜单”）添加一个类，为您的子菜单项（即“子菜单”）添加一个类，并在单击“主菜单”项时关闭所有“子菜单”项的功能.

【讨论】：