關閉打開子菜單 - jQuery手風琴

我有一個jQuery菜單，我希望能夠關閉打開的菜單（以便關閉所有菜單）。要在這一刻關閉的唯一方法是點擊打開另一個菜單，我已經在其中工作了很多年，並且相對而言沒有任何意義。有沒有什麼辦法可以讓我打開菜單關閉，而無需點擊不同的菜單。關閉打開子菜單 - 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();});

任何幫助是非常APPR eciated，謝謝。

來源

2013-11-04 Ggnome

發現在前面的回答有些瑕疵，所以我已經重新編輯過的問題也有一些變化在代碼中的答案。您可以更改代碼或回退到之前的代碼，無論您認爲現有代碼的添加會導致不期望的功能 – UDB

@UDB謝謝，您的代碼在jsfiddle中效果很好，不幸的是每當我在網站上嘗試它時（它在wordpress上）它不能很好地工作。也許還有別的東西與它有什麼衝突，這不是我的網站，我現在還不知道我的方式。但是你給了我一種新的看待它的方式，希望我能從中找出一些東西。謝謝 – Ggnome

哪個部分在網站上表現不同？ – UDB

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

})

來源

2013-11-04 13:54:07 UDB

嘗試使用此代碼：

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

來源

2013-11-04 13:52:20

關閉打開子菜單 - jQuery手風琴

回答

相關問題