当Bootstrap下拉切换触发时，Jquery 'document on click‘不起作用
当Bootstrap下拉切换触发时，Jquery 'document on click‘不起作用
提问于 2019-05-22 03:05:19
The Problem
我有一个事件侦听器，当下拉菜单外部发生单击时，它会隐藏下拉菜单(通过删除类)：
$(document).on('click', function(event) {
if (!$(event.target).closest('#myDropdown').length) {
$('#myDropdown').removeClass("show-menu");
}
});它工作得很好，除了当我点击一个bootstrap下拉菜单时(它使用类的.dropdown切换)。在这种情况下，我的dropdown保持打开，而bootstrap下拉也是打开的。单击事件在DOM中永远听不到。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-22 03:11:01
更新：经过一番努力，我找到了答案：
出于某种未知的原因，Bootstrap .dropdown-togling.bootstrap包含stopPropagation。因此，当它被单击时，文档树中的其他任何内容都不会被听到。我的解决方案是除了我的文档侦听器之外，还显式地包含.dropdown-togling类的事件侦听器。
$(document).on('click', function(event) {
if (!$(event.target).closest('#myDropdown').length) {
$('#myDropdown').removeClass("show-menu");
}
});
//listens for Bootstrap .dropdown-toggle
$('.dropdown-toggle').on('click', function(event) {
if (!$(event.target).closest('#myDropdown').length) {
$('#myDropdown').removeClass("show-menu");
}
});如果有人有更好的解决方案，我很乐意将其标记为正确的答案！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56244915
复制相关文章
相似问题