jquery - 单击元素以外的任意位置以使用 if 语句隐藏它

Question

下面的解决方案

我已经阅读了这里有关这个概念的大多数问题，但我似乎无法让它与 if 语句一起使用。有什么帮助吗？

JSFiddle

$("button").click(function () {
  $("div").fadeToggle("fast");
});

if ($("div").is(":visible")) {
  $(document).click(function () {
    $("div").fadeToggle("fast");
  });

  $("div").click(function (e) {
    e.stopPropagation();
  });
}

所以，按钮应该切换 div。当 div 被切换时(即 :visible)，div 只能通过单击页面上的任意位置来切换回来(不可见)，而不能在单击 div 本身时切换回来。

解决方案

我合并了Diabolic's answer和 Kevin Bowersox's answer进入this one .

$("button").click(function (e) {
    $("div").fadeToggle("fast");
    e.stopImmediatePropagation();
});

$(document).click(function (e) {
    if($("div").is(":visible") && !$("div").is(e.target)) {
        $("div").fadeOut("fast");
    }
});

Answer 1

Javascript

$("button").click(function (e) {
  $("div").fadeToggle("fast");
});

$(document).mouseup(function(event){
    var target = $("#no-mod");
    if(!target.is(event.target) && !$("button").is(event.target) && target.is(":visible")){
       $("div").fadeToggle("fast");
    }else{
      return false;
    }
});

HTML

<button>Click me</button>
<div id="no-mod"></div>

示例:http://jsfiddle.net/2udYp/9/