当其他菜单被点击时jQuery隐藏子菜单

我正在使用this小脚本创建一个包含子链接的水平菜单。我有一切工作，但有一个小的障碍，这是我需要子菜单关闭，当另一个子菜单被点击。你可以看到我的菜单here我需要它，所以如果你点击菜单一，然后点击菜单二，那么菜单一个子链接消失。当其他菜单被点击时jQuery隐藏子菜单

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

});

来源

2017-02-12 Duggy G

的jsfiddle例子是真的很有帮助。 –

您需要添加：

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

所以，你的下一个子菜单打开之前，关闭所有当前打开的。代码：

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

来源

2017-02-12 14:14:26 whoiswho

完美。谢谢 –

您可以设定每次点击都会removeClass。主动从所有.drop向下项，然后添加类活跃所点击的项目，然后。下拉曲肘：不是（“主动”）隐藏（）

来源

2017-02-12 14:09:16 YonatanAr

如果有一些jsfiddle片段，我可以使它更简单，但我希望你能得到我的想法:) – YonatanAr

在你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); 
});

来源

2017-02-12 14:39:01 gaetanoM

当其他菜单被点击时jQuery隐藏子菜单

回答

相关问题