Question

我知道在这方面有十几个问题，但它们似乎都不适合我。我正在尝试的是以下代码：

jQuery('.mybutton').click(function(){

  jQuery('.list').show().bind('click', function(event){
    event.stopPropagation();
  });

  jQuery('html').bind('click', function() {
    jQuery('.list').hide();
  });
});

列表项永远不会打开。总是触发html绑定点击。

Answer 1

不是将click绑定到html和.list，而是将其全局绑定，并检查当前目标是否是.list元素的子节点。

jQuery('.mybutton').click(function(){
  jQuery(window).click(function(event) {
       var $elem = $(event.target)
       if($elem.hasClass('list') || $elem.parents('.list').length == 0) return;
       jQuery('.list').hide();
   });
});

Answer 2

你不应该像点击那样绑定事件。尝试这样的事情。

jQuery('.mybutton').click(function(e){
  jQuery('.list').show();
   e.stopPropagation();
});

jQuery('body').click(function() {
  jQuery('.list').hide();
});

jQuery('.list').click(function(e){
  e.stopPropagation();
});

我认为主要的问题是你的mybutton点击处理程序中也需要一个stopPropagation调用。

jQuery按钮打开列表，在外部单击时关闭列表

2 个答案: