如何在点击文档的主体和指定的元素上淡出和淡出任何元素？

Question

Hello Guys！

我一直在尝试创建一个fadeIn和fadeOut菜单，但它似乎根本不起作用！当我点击归类为div的我的触发元素（example）时，看到的问题是 它应该在元素（div）归类为element_obj时淡出，但如果用户在element_obj（div）淡入时点击了body元素。但是当我点击我的触发器元素，我的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();
      }

    });
});

任何人都可以帮我解决这个问题。

PROBLEM DEMO

提前致谢！

---

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

PROBLEM 2 DEMO

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

提前致谢！

---

Answer 1

这是因为div＃example上的click事件被冒泡到body元素和
因此，目标元素通过div＃示例淡入，随后也会执行正文单击处理程序 您需要停止div＃example的事件传播以保留fadeIn

将div＃example click handler更改为：

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

});