关闭打开的子菜单 - jQuery手风琴 [英] Closing open submenu - jQuery accordion

问题描述

我有一个jQuery菜单，我希望能够关闭一个打开的菜单（以便关闭所有菜单）。要在这一刻关闭的唯一方法是点击打开另一个菜单，我已经在其中工作了很多年，并且相对而言没有任何意义。有没有什么办法可以打开菜单关闭而不点击不同的菜单。

I have a jQuery menu and I want to be able to close a menu that is open (so that all menus are closed). The only way for it to close at the minute is to click open another menu, I've worked at it for ages and got relatively nowhere with it. Is there any way I can get the open menu to close without clicking a different menu.

以下是代码：

http://jsfiddle.net/52EH8/9/

HTML

<ul id="nav">
<li> <a href="#">Menu 1</a>

    <ul>
        <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>
    </ul>
</li>
<li> <a href="#">Menu 2</a>

    <ul>
        <li><a href="#">Sub Menu 5</a>
        </li>
        <li><a href="#">Sub Menu 6</a>
        </li>
        <li><a href="#">Sub Menu 7</a>
        </li>
        <li><a href="#">Sub Menu 8</a>
        </li>
        <li><a href="#">Sub Menu 9</a>
        </li>
    </ul>
</li>
<li><a href="#">Menu 3 - No Submenu</a>
</li>
<li> <a href="#">Menu 4</a>

    <ul>
        <li><a href="#">Sub Menu 10</a>
        </li>
        <li><a href="#">Sub Menu 11</a>
        </li>
        <li><a href="#">Sub Menu 12</a>
        </li>
        <li><a href="#">Sub Menu 13</a>
        </li>
    </ul>
</li>
<li> <a href="#">Menu 5</a>

    <ul>
        <li><a href="#">Sub Menu 14</a>
        </li>
        <li><a href="#">Sub Menu 15</a>
        </li>
        <li><a href="#">Sub Menu 16</a>
        </li>
        <li><a href="#">Sub Menu 17</a>
        </li>
        <li><a href="#">Sub Menu 18</a>
        </li>
    </ul>
</li>

jQuery

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

 function () {
     var checkElement = $(this).next();
     if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
         return false;
     }
     if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
         removeActiveClassFromAll();
         $(this).addClass("active");
         $('#nav ul:visible').slideToggle('normal');
         checkElement.slideToggle('normal');
         return false;
     }
 });
 }
 function removeActiveClassFromAll() {
     $('#nav li a').each(function (index) {
          $(this).removeClass("active");
      });
     }
 $(document).ready(function () {initMenu();});

非常感谢您的任何帮助，感谢您。

Any help is much appreciated, Thank You.

推荐答案

DEMO

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

 function () {
     var checkElement = $(this).next();
     if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
         $('#nav ul:visible').slideToggle('normal'); //EDITED:-close the menu if clicked again
     }
     if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
         removeActiveClassFromAll();
         $(this).addClass("active");
         $('#nav ul:visible').slideToggle('normal');
         checkElement.slideToggle('normal');
         return false;
     }

     //NEW CONDITION ADDED TO CLOSE ANY VISIBLE MENU WHEN MENU WITHOUT SUB MENU IS CLICKED
     if($(this).siblings('ul').length==0 && $(this).parent().parent().attr('id')=='nav')
     {

         removeActiveClassFromAll();
         $(this).addClass("active");
         $('#nav ul:visible').slideToggle('normal');

         return false;
     }
 });
}

function removeActiveClassFromAll() {
 $('#nav li a').each(function (index) {
     $(this).removeClass("active");
 });
}


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

//PART BELOW IS TO CLOSE TO MENU WHEN CLICK IS DETECTED ELSEWHERE ON DOCUMENT

$('#nav').click(function (e)

{
   e.stopPropagation();
})


 $(document).click(function () {
     $('#nav').children('li').each(function () {

       if ($(this).children('ul').css('display') == 'block') {
           $(this).children('ul').slideToggle('normal')
           $(this).children('a').removeClass('active')
       }
     })

 })

这篇关于关闭打开的子菜单 - jQuery手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！