2

下面的解决方案

我已经阅读了关于这个概念的大多数问题，但我似乎无法让它与 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");
    }
});
4

5 回答 5

2

请检查您的代码更新：

$("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();
 });
于 2013-01-31T09:52:23.560 回答
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/

于 2013-01-31T10:17:56.177 回答
1

你的代码应该更像这样；

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

于 2013-01-31T09:52:42.077 回答
0

对于这个，你真的不需要很多 IF 语句。伪代码明智，您希望单击按钮上的任意位置<body>以隐藏按钮，但单击按钮执行其他操作。您可以使用.click()or.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()因为它已折旧。使用.on()可以在此处的文档中找到。

除此之外，上面的代码完美无缺。我想指出，这个答案是可扩展的——你可能需要在代码中e.preventDefault()使用 a 引用的每个元素中放置或类似的其他答案。.click()此代码将来不需要任何更改。

于 2013-01-31T09:53:11.530 回答
0

这是您要寻找的行为吗？？？

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

修改过的小提琴

编辑代码：

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

改良小提琴 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();
});

改良小提琴 3

于 2013-01-31T09:57:57.047 回答