如何在单击文档正文和指定元素时淡入和淡出任何元素？答案

【问题标题】：How to fadeIn and fadeOut any element on clicking document's body and a specified element both?如何在单击文档正文和指定元素时淡入和淡出任何元素？
【发布时间】：2011-08-05 16:41:27
【问题描述】：

大家好！

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

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

提前致谢！

【问题讨论】：

标签： jquery html jquery-ui jquery-plugins jquery-selectors

【解决方案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();
});

【讨论】：

+1 可读代码。 这就是.stopPropagation()的用途！
感谢您之前对这个问题的回答，但现在我需要您的另一个帮助来解决这个新问题，请查看并帮助我。提前致谢！
好的，我得到了答案。再次感谢您的帮助。
我不确定我是否听懂了你的问题。对 jsfiddle 帖子进行了更改。检查@@jsfiddle.net/UxQNV/1 并告诉我您是否是这个意思？

【解决方案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();
        }
      }
    });
});

【讨论】：

【解决方案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();       
  }    

});

【讨论】：