jQuery скрыть подменю при нажатии другого меню

Question

Я использую небольшой скрипт для создания горизонтального меню с подписями. У меня все работает, но есть небольшая загвоздка, и мне нужно, чтобы подменю закрывалось при нажатии другого подменю. Вы можете увидеть мое меню here Мне это нужно, так что, если вы нажмете меню один, а затем нажмите меню два, то одно меню перестанет исчезать.

здесь является JQuery для меню:

$(function() { 

// Dropdown toggle 
$('.dropdown-toggle').click(function(){ 
    $(this).next('.dropdown').toggle(); 
}); 

$(document).click(function(e) { 
    var target = e.target; 
    if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) { 
    $('.dropdown').hide(); 
    } 
}); 

}); 

Answer 1

Вам нужно добавить:

$('.dropdown').css('display', 'none'); 

Так перед открытием вашего следующего подменю, он закрывает все открыто. Код:

// Dropdown toggle 
$('.dropdown-toggle').click(function(){ 
    $('.dropdown').css('display', 'none'); //New code 
    $(this).next('.dropdown').toggle(); 
}); 

Answer 2

вы можете установить, что каждый щелчок removeClass .active от всех .drop-вниз-элементов, а затем добавить класса к активному щелкнутому пункту, а затем. выпадающий-тумблер:. нет ('активный') скрыть()

Answer 3

В ваших custom.js вы можете изменить эти строки:

// On click sub menu 
$('.dropdown-toggle').click(function(){ 
    $(this).next('.dropdown').toggle(); 
}); 

$(document).click(function(e) { 
    var target = e.target; 
    if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) { 
     $('.dropdown').hide(); 
    } 
}); 

с:

// 
// delegate the click event handler 
// 
$(document).on('click', '.dropdown-toggle', function(e) { 
    // 
    // is current submenu visible? 
    // 
    var isVisible = $(this).next('.dropdown').is(':visible'); 
    // 
    // hide all submenu, not current 
    // 
    $(this).siblings('.dropdown-toggle').next('.dropdown').hide(); 
    // 
    // toggle the visibility of current menu: visible <--> invisible 
    // 
    $(this).next('.dropdown').toggle(!isVisible); 
});