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

Question

大家好!

我一直在尝试创建一个淡入淡出菜单，但它似乎根本不起作用!看到问题是当我单击分类为 example 的触发元素 (div) 时它应该在 element_obj 类元素 (div) 中淡出，但是如果用户在 element_obj (div ) 淡入。但是当我点击我的触发元素时，我的 element_obj (div) 淡入并在另一时刻淡出!我知道这是问题所在，因为我也将 body 元素作为淡出触发器!但如果我不这样做，我的整个效果就会死!这是我创建的 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

提前致谢!

---

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

PROBLEM 2 DEMO

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

提前致谢!

---

Answer 1

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

将 div#example 点击处理程序更改为如下所示:

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