html - JQuery，当点击它的任何地方时如何使div消失？

Question

我正在尝试实现以下行为：

当单击带有 DivA id 的链接“选项”时，DivB 应显示为淡入效果。如果我再次单击“选项”链接以及单击页面中除 DivB 之外的任何其他位置，则 DivB 应该再次消失。

这是我的 HTML 代码：

<a href="..." id="DivA">Option</a>
<div id="DivB">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>

这是我的 JQuery 代码。这是错误的，如果 DivB 被隐藏并且我单击文档中的任意位置，则会出现 DivB。

<script type="text/javascript">
    $(document).click(function () {
        $("#DivB").fadeToggle("200");
    });
    $("#DivA").click(function () {
        e.stopPropagation();
        return false;       
    });
</script>

哪里错了？感谢帮助。

Answer 1

Live Demo

$(function() {
  $(document).on("click",function (e) {
     if (e.target.id=="DivA") {
       $("#DivB").fadeToggle(200);
       e.stopPropagation();
       return false;
     }
     else if ($("#DivB").is(":visible")) {
       $("#DivB").fadeOut(200);
     }
  });
});

Answer 2

<script>
    $(document).on('click', function( evt ) {
        evt.stopPropagation();
        if ( evt.target.id == 'DivA' || $('#DivB').is(':visible')) 
             $('#DivB').fadeToggle();
    });
</script>

小提琴：http: //jsfiddle.net/nR6e3/1/

Answer 3

$(document).on("click",function () {
   if ($("#DivB").is(":visible")){
       $("#DivB").fadeOut(200);
   }
});

$("#DivA").click(function (e) { // you need place 'e'(for event handling)
    $("#DivB").fadeIn(200);
    e.stopPropagation();
    return false;       
});

Answer 4

    $(document).mouseup(function(e) {
        var container = $("your selector here");
    
        // if the target of the click not the container or not a descendant of that container
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            container.hide();
        }
    });