Закрыть подменю при нажатии другого элемента подменю

Question

Привет, у меня есть этот код для управления меню, он отлично работает, но я также хочу, чтобы все остальные подменю закрывались, когда я нажимаю, чтобы открыть какое-то другое подменю. Одним словом: Klick one +, чтобы открыть подменю, klick another +, чтобы открыть это подменю и закрыть первое подменю.

спасибо.

И похоже, что мне нужно добавить несколько подробностей, но я не знаю, что еще сказать.

/* 
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 demojsFiddle

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 для этого, в отличие от прокатки свой собственный.

Она охватывает все виды оснований и делает все виды вещей, как это, так намного проще ...