當點擊另一個子菜單項時關閉子菜單

Question

你好，我有這段代碼來控制菜單，它工作的很好，但是當我點擊打開其他一些子菜單時，我還想讓所有其他子菜單關閉。 簡而言之：Klick one +打開一個子菜單，點擊另一個+打開子菜單並關閉第一個子菜單。

謝謝。

它看起來像我不得不添加一些細節，但我不知道還有什麼可說的。

/* 
Flaunt.js v1.0.0 
by Todd Motto: http://www.toddmotto.com 
Latest version: https://github.com/toddmotto/flaunt-js 

Copyright 2013 Todd Motto 
Licensed under the MIT license 
http://www.opensource.org/licenses/mit-license.php 

Flaunt JS, stylish responsive navigations with nested click to reveal. 
*/ 
;(function($) { 

// DOM ready 
$(function() { 

// Add some classes and Append the mobile icon nav 
$('.nav').append($('<div class="nav-mobile"></div>')); 
$('.nav > ul').addClass('nav-list'); 
$('.nav > ul > li').addClass('nav-item'); 
$('.nav > ul > li > ul').addClass('nav-submenu'); 
$('.nav > ul > li > ul > li').addClass('nav-submenu-item'); 

// Add a <span> to every .nav-item that has a <ul> inside. And add an sub menu icon indicator. 
$('.nav-item').has('ul').prepend('<span class="nav-click"><i></i></span>'); 

// Click to reveal the mobile menu 
$('.nav-mobile').click(function(){ 
$('.nav-list').toggle(); 
$('.nav-submenu').hide(); // This will close the submenu when i click the top ribbon (.nav-mobile) to close the mobile menu 
if(!$('.nav-list').is(':visible')){ // the menu was closed because it's not visible anymore 
$('.nav-item .nav-click').each(function(){ // loop through nav clicks 
if($(this).hasClass('icon-close')) { // This will toggle back the + icon on mobile menu close/open 
$(this).toggleClass('icon-close');   
} 
}); 
} 
}); 

// Dynamic binding to on 'click' and Toggle the nested nav 
$('.nav-list').on('click', '.nav-click', function(){ 
$(this).siblings('.nav-submenu').toggle(); 

// This will toggle the + and - when clicked 
$(this).removeClass('nav-click'); 
$(this).toggleClass('icon-close'); 
$(this).toggleClass('nav-click'); 
}); 

// This will toggle the menu/submenu/- when click outside of the menu 
$('.wrapper').click(function(event) { 
$('html').one('click',function() { 
$('.nav-list').hide(); 
$('.nav-submenu').hide(); // This will close the submenu when you click the top ribbon (hamburger button) to close the mobile menu 
if(!$('.nav-list').is(':visible')){ // the menu was closed because it's not visible anymore 
$('.nav-item .nav-click').each(function(){ // loop through nav clicks 
if($(this).hasClass('icon-close')) { // This will toggle the +/- icon on mobile menu close/open 
$(this).toggleClass('icon-close'); 
} 
}); 
} 
}); 
event.stopPropagation(); 
}); 

}); 

})(jQuery); 

Live demo jsFiddle

Answer 1

有可能是做一個更好的方式，但我認爲已完成了工作，你希望它的方式。

http://jsfiddle.net/L73dqxhd/

第40行開始，我把它改成這樣：

// Dynamic binding to on 'click' and Toggle the nested nav 
$('.nav-list').on('click', '.nav-click', function(){ 
    var currentSubmenu = $(this).siblings('.nav-submenu'); 
    var currentNavClick = $(this); 
    $('.nav-submenu').not(currentSubmenu).slideUp(); 
    $('.nav-click').not(currentNavClick).removeClass('icon-close'); 
    $(this).siblings('.nav-submenu').toggle(); 

FWIW我真的建議使用像bootstrap這個，而不是滾動您自己。

它涵蓋了各種各樣的基地，使得各種各樣的東西，像這樣，更容易...