当 Bootstrap 下拉切换触发时，Jquery '单击文档'不起作用

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

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