Question

我有一个div（sel_optn1），我点击li（sel_optn1）时显示opt1 并隐藏sel_optn1侧面点击sel_optn1 它工作正常，但如果我点击sel_optn1的孩子，它就会隐藏。

我希望仅在外部点击时隐藏sel_optn1，但要隐藏sel_optn1儿童点击隐藏sel_optn1

请参阅此示例，我正在尝试http://jsbin.com/ahuyak/1/edit

任何人都可以帮助我实现这一目标。

Answer 1

更新您的检查功能以检查其子元素的点击次数：

if(e.target.className !== "sel_optn1" && !$(e.target).parents('.sel_optn1').length)

Answer 2

只需检查点击目标是否在元素

中

if(e.target.className !== "sel_optn1" && !$.contains($(".sel_optn1")[0], e.target))
{
    $('.sel_optn1').css({"display":'none'});
}

Answer 3

div(sel_optn1).children().click(function(){stopPropagation ( );})

Answer 4

检查

http://jsbin.com/ahuyak/11/edit

您必须检查所有子元素

Answer 5

您可以尝试使用blur：http://jsbin.com/ahuyak/12/edit

$(document).ready(function(){
   $("#opt1").click(function(e){
     $('.sel_optn1 , :text').show();
     e.stopPropagation();
   });

   $('.sel_optn1 > :text').blur(function(e){
      $('.sel_optn1 , :text').hide();
      e.stopPropagation();
   });
});

Answer 6

我在文档上绑定了click事件，并检查单击的目标是否为.sel_optn1，然后我绑定了文档上的click事件，并检查其目标是否为.sel_optn1或任何它的孩子，不要隐藏它：

$(document).ready(function(){
  var option = $(".sel_optn1");

  $("#opt1").click(function(e){
    e.stopImmediatePropagation();
    option.toggle();
  });

  $(document).click(function(e){
    var target = $(e.target);
    if(!(target.is(option) || option.find(target).length)){
      option.hide();
    }
  });
});

和一个演示： http://jsbin.com/ahuyak/15/

jQuery隐藏div点击外部div除了它的子div

6 个答案: