关闭开放子菜单 – jQuery手风琴

我有一个jQuery菜单，我希望能够关闭一个打开的菜单（以便关闭所有菜单）。 它在一分钟关闭的唯一方法是点击打开另一个菜单，我已经工作了很长时间并且相对无处。 有没有什么办法可以让你打开菜单关闭而不点击不同的菜单。

这是代码：

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

HTML

 
 Menu 1 
 
Sub Menu 1 
 
Sub Menu 2 
 
Sub Menu 3 
 
Sub Menu 4 
 
 
 
 Menu 2 
 
Sub Menu 5 
 
Sub Menu 6 
 
Sub Menu 7 
 
Sub Menu 8 
 
Sub Menu 9 
 
 
 
Menu 3 - No Submenu 
 
 Menu 4 
 
Sub Menu 10 
 
Sub Menu 11 
 
Sub Menu 12 
 
Sub Menu 13 
 
 
 
 Menu 5 
 
Sub Menu 14 
 
Sub Menu 15 
 
Sub Menu 16 
 
Sub Menu 17 
 
Sub Menu 18 
 
  

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();}); 

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

Answer 1

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') } }) }) 

Answer 2

尝试使用此代码：

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