Question

以下解决方案

我已经阅读了有关此概念的大多数问题，但我似乎无法使用if语句。有什么帮助吗？

$("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

请检查您的代码更新：

$("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();
 });

Answer 2

<强>的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/

Answer 3

您的代码应该更像这样;

$("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（）来确保在该行之后不会执行其他事件。

Answer 4

你不确实需要很多这样的IF语句。伪代码，您希望点击<body>上的任意位置来隐藏按钮，但点击按钮可以执行其他操作。您可以使用.click()或.on('click', function() . . .来实现此目标。

请参阅以下代码：

$('body').click(function(e) {
    if(e.target.id == "btn"){
        $('#box').show();
    }
    else
    {
        if(e.target.id !== 'box')
        {
            $('#box').hide();
        }
    }
});

...和你的标记：

<body>
    <button id='btn'>Click me</button>
    <div id = "box" width="50px" height="50px"></div>
</body>

您可以在此JSFIDDLE

查看此信息

我想说一些重要的事情。如果您正在动态创建元素，请不要使用.live()，因为它已被折旧。使用可以找到in the docs here的.on()。

除此之外，上述代码完美无瑕。我想指出，这个答案可扩展 - 与其他人一起*您可能需要在代码中使用e.preventDefault()引用的每个元素中放置.click()或类似内容。此代码将来不需要任何更改。

Answer 5

这是你正在寻找的行为???

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

Modified Fiddle

编辑代码：

$(document).click(function (e) {
    $("div").fadeToggle("fast");
    e.stopPropagation();

    if($("div").is(':visible')){
        $("div").click(function (e) {    
            e.stopPropagation();
        });
    }
});
$("button").click(function (e) {
    $("div").fadeToggle("slow");
    e.stopPropagation();
});

Modified Fiddle 2

编辑2：

(document).click(function (e) {
   if($("div").is(':visible')){
         $("div").fadeToggle("fast");
    }
    $("div").click(function (e) {    
       e.stopPropagation();
    });
});
$("button").click(function (e) {
  $("div").fadeToggle("slow");
  e.stopPropagation();
});

Modified Fiddle 3

单击任何位置，但在元素上隐藏它与if语句

解决方案

5 个答案: