Question

问题

我有一个事件侦听器，当在下拉菜单之外单击时会隐藏该下拉菜单（通过删除类）：

$(document).on('click', function(event) {
 if (!$(event.target).closest('#myDropdown').length) {
      $('#myDropdown').removeClass("show-menu");
 }
});

除了我单击引导程序下拉菜单（使用类'.dropdown-toggle）之外，它运行得很好。在这种情况下，我的下拉列表保持打开状态，而引导程序下拉列表也处于打开状态。不会在DOM中听到click事件。

Answer 1

更新：经过很多努力，我找到了答案：

由于某些未知原因，Bootstrap .dropdown-toggle包含stopPropagation。因此，单击它时，在文档树中听不到其他任何内容。我的解决方案是，除了我的文档侦听器之外，还显式包括.dropdown-toggle类的事件侦听器。

      $(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");
        }
      });

如果有人有更好的解决方案，我很乐意将其标记为正确答案！

Bootstrap下拉切换触发时，jQuery“单击文档”不起作用

1 个答案: