Question

我想用这个问题挑选你的大脑我正在使用jquery设置一个可折叠的菜单。我目前正在使用slideToggle（）函数通过单击菜单来设置collasping动画，它可以独立关闭和打开子菜单。但是我试图找出一种方法让子菜单在另一个打开时崩溃。任何建议/提示将不胜感激。

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>

谢谢，

安德烈

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

在您的菜单项（即“主菜单”）上添加一个课程，将另一个课程设置为子菜单项，即“子菜单”，并在“主菜单”项目上发生单击时关闭所有“子菜单”项目

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

3 个答案: