Jquery 'document on click' 在 Bootstrap 下拉切换触发时不起作用

Question

问题

我有一个事件侦听器，当点击发生在下拉列表之外时，它会隐藏下拉列表（通过删除 class）：

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

它工作得很好，除非我点击 bootstrap 下拉菜单（使用 class '.dropdown-toggle）。在那种情况下，我的下拉菜单保持打开状态，而 bootstrap 下拉菜单也打开。在 DOM.

中从未听到点击事件

Answer 1

更新：经过一番努力我找到了答案：

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

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

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

Jquery 'document on click' 在 Bootstrap 下拉切换触发时不起作用

Jquery 'document on click' doesn't work when Bootstrap dropdown-toggle fires

jquery

stoppropagation

twitter-bootstrap-3

dropdown