javascript - jQuery隐藏div单击除其子div之外的div

Question

我有一个 div( sel_optn1)，我sel_optn1在点击 li( 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

检查这个

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

您必须检查所有子元素

Answer 3

你可以试试：http blur: //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 4

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

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

Answer 5

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

Answer 6

我在文档上绑定了点击事件并检查被点击的目标是否是.sel_optn1，然后我在文档上绑定了点击事件并检查它的目标，如果它.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/