如何在单击文档主体和指定元素时淡入和淡出任何元素？

Question

大家好！

我一直在尝试创建淡入和淡出菜单，但它似乎根本不起作用！看到问题是当我单击属于 example 的触发元素 (div) 时 它应该在类 element_obj 的元素 (div) 中淡入淡出，但是如果用户在 element_obj (div）淡入。但是，当我单击实例的触发元素时，我的 element_obj (div) 淡入，并在另一时刻淡出！我知道这是问题所在，因为我也将我的身体元素作为淡出触发器！但如果我不这样做，我的整个效果就会死亡！这是我创建的 jQuery 代码~~~~~~~~~

$(document).ready(function () {
  $('div#example').click(function () {

      if($('div#example_obj').is(':visible')){
            $('div#example_obj').fadeOut();
      }else{
            $('div#example_obj').fadeIn();
      }

  });
    $(document).click(function () {

      if($('div#example_obj').is(':visible')){
            $('div#example_obj').fadeOut();
      }

    });
});

谁能帮我解决这个问题。

问题演示

提前致谢！

---

正如您在这个演示中看到的，我的上述问题得到了解决，但又出现了一个新问题！现在我希望点击下拉菜单时出现。我的意思是，如果用户单击下拉菜单，它不会像现在一样淡出。请看下面的演示来看看这个新问题~~~~~~~~~~~~

问题 2 DEMO

希望你们也能帮我解决这个问题。

提前致谢！

---

Answer 1

这是因为 div#example 上的点击事件向上冒泡到 body 元素并且
因此目标元素通过 div#example 淡入，随后主体点击处理程序也被执行。
您需要停止 div#example 的事件传播以保留 fadeIn

将 div#example 单击处理程序更改为如下：

$('div#example').click(function (e) {        
    if($('div#example_obj').is(':visible')){             
        $('div#example_obj').fadeOut();       
    }else{             
        $('div#example_obj').fadeIn();       
    }    
  e.stopPropagation();
}); 

Answer 2

这可能有效。真丑啊...

$(document).ready(function () {
    $(document).click(function(e) {
      if (e.targetElement.id == 'example')
      {
        if($('div#example_obj').is(':visible')){
            $('div#example_obj').stop().fadeOut();
        }else{
            $('div#example_obj').stop().fadeIn();
        }
      } else {
        if($('div#example_obj').is(':visible')){
            $('div#example_obj').stop().fadeOut();
        }
      }
    });
});

Answer 3

您的事件正在通过两个事件侦听器冒泡。当您点击 $('div#example') 时，您同时也在点击 document，因此两者都会触发。您需要防止事件传播。将第一个事件处理程序更改为：

$('div#example').click(function (e) {
  e.stopPropagation();

  if($('div#example_obj').is(':visible')){             
    $('div#example_obj').fadeOut();       
  }else{             
    $('div#example_obj').fadeIn();       
  }    

});