开发者问题收集

单击元素以外的任意位置即可使用 if 语句将其隐藏

2013-01-31
7477
jquery if-statement

解决方案如下

我已经阅读了这里关于这个概念的大多数问题，但我似乎无法让它与 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 的答案 和 Kevin Bowersox 的答案 合并为 这个 。 

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

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

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/

Kevin Bowersox
2013-01-31

请检查您的代码更新： 

$("button").click(function (e) {
  $("div").fadeToggle("fast");
  e.stopPropagation();
});
$("div").click(function (e) {    
  $("div").fadeIn("fast");
     e.stopPropagation();
});
 $(document).click(function (e) {
    $("div").fadeToggle("fast");
      e.stopPropagation();
 });
Raed Alsaleh
2013-01-31

您的代码应该更像这样； 

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

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

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

为什么？

因为您没有在运行时绑定事件。您在语句中执行此操作，该语句不会立即发生，并且当它发生时，它只是创建一个事件，而不是立即运行它。

我尽量少编辑您的代码。:)

附加信息： 并使用 stopImmediatePropagation() 而不是 stopPropagation() 以确保在该行之后不会执行任何其他事件。

Diabolic
2013-01-31