关闭打开的子菜单 - jQuery 手风琴

Closing open submenu - jQuery accordion

本文关键字：菜单 jQuery 手风琴      更新时间：2023-09-26

我有一个jQuery菜单，我希望能够关闭一个打开的菜单（以便关闭所有菜单）。它目前关闭的唯一方法是单击打开另一个菜单，我已经为此工作了很长时间，但相对无处可去。有什么方法可以在不单击其他菜单的情况下关闭打开的菜单。

这是代码：

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

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

演示 

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

尝试使用以下代码：

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();});
相关文章：