I'm using this small script to create a horizontal menu with sub links. I have everything working but there is a small snag and that is I need the submenus to close when another submenu is clicked. You can see my menu here I need it so that if you click menu one and then click menu two then the menu one sublinks disappear.
here is the jQuery for the menu:
$(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();
}
});
});
您可以设置每次单击将从所有.drop-down-items中删除Class .active,然后将active class添加到所单击的项目中,然后再添加.dropdown-toggle:not('。active')。hide()
You need to add:
$('.dropdown').css('display', 'none');
So before your next submenu opens, it closes all currently open. Code:
// Dropdown toggle
$('.dropdown-toggle').click(function(){
$('.dropdown').css('display', 'none'); //New code
$(this).next('.dropdown').toggle();
});
In your custom.js you can change these lines:
// 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();
}
});
with:
//
// 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);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.