jQuery“点击显示/隐藏div”和“点击外部隐藏”无法同时工作

Question

//我搜索了但没有结果，所以我提出一个新的问题 :)

我有：

<a class="icon hide-text" id="btnNoti5" href="#">通知</a>

我希望：当我点击这个a时，它会显示/隐藏一个div。当我点击div外面的区域时，如果它是可见的，它将被隐藏。

我使用这段代码来显示/隐藏。它运行良好：

var divNotifi = $('#divNotifi');
$('#btnNoti5').click(function(e) 
{
    if (divNotifi.is(":visible"))
    {           
        divNotifi.hide();
    }
    else 
    {         
        divNotifi.show();
    }
}

但是当我添加这段代码以隐藏div时，它确实有效，但上面的代码停止工作了：第一次点击，它显示div。第二次点击：什么也不发生。div没有按预期隐藏。

$(document).mouseup(function (e)
{
    var container = $("#divNotifi");
    if (container.has(e.target).length == 0)
    {
        container.hide();
    }
});

请帮我。非常感谢。

- Phuong Nguyen

---

使用divNotifi.toggle()可以简化以下代码：if (divNotifi.is(":visible")) { divNotifi.hide(); } else { divNotifi.show(); } - gdoron

尝试使用http://api.jquery.com/toggle/。 - dev2d

@gdoron 和 @VJD：谢谢。我知道这个。但如果我使用 toggle()，问题仍然存在 :D - Phuong Nguyen

Answer 1

$(document).on('click', function(e) {
    var elem = $(e.target).closest('#btnNoti5'),
        box  = $(e.target).closest('#divNotifi');

    if ( elem.length ) {          // the anchor was clicked
        e.preventDefault();       // prevent the default action
        $('#divNotifi').toggle(); // toggle visibility
    }else if (!box.length){       // the document, but not the anchor or the div
        $('#divNotifi').hide();   // was clicked, hide it !
    }
});

FIDDLE

- adeneo

---

谢谢。我会尝试这个。嗯...你能解释一下我的代码问题的原因吗？ - Phuong Nguyen

第一个点击函数没有正确关闭，第二个函数可以工作，但是当点击divNotifi元素时不起作用，因为has()检查target是否在divNotifi内部，所以您必须点击divNotifi内部的元素而不是元素本身。 - adeneo

现在一切都好了。感谢您的解决方案和解释。 - Phuong Nguyen

Answer 2

使用相同的事件来停止其传播。

$(document).click(function (e)
{
    var container = $("#divNotifi");
    if (container.has(e.target).length === 0)
    {
        container.hide();
    }
});

$('#btnNoti5').click(function(e) 
{
    if (divNotifi.is(":visible"))
    {           
        divNotifi.hide();
    }
    else 
    {      
        divNotifi.show();
    }
    return false;
});

- Hugo Mallet

---

@Hugo Mallet，我可以了解一下container.has（e.target）。length === 0的含义以及为什么需要在第二个click事件处理程序中返回false吗？谢谢。 - Boon

Answer 3

我可以帮您进行翻译。以下是您需要翻译的内容：

有一个技巧，我喜欢用在这种情况下。

在jQuery库中：

$('#div').addClass('Class-Name');

每当它显示时 - 添加一个名为“show”的类。

然后检查它是否显示：

if ($('#div').hasClass('Class-Name') )
{
     // some actions
}

.hasClass() 是 jQuery 库的一部分。另外一个来自 jQuery 库的函数是：.removeClass()

我的操作步骤如下：

显示 - 添加类名 "show" 点击 - 检查是否有类名 "show"，然后移除类名。

希望你能够发现使用我的技巧的方法 :)

这种做法非常容易实现图形化的效果。虽然并不是每个人都喜欢我的方法 - 但我喜欢它，因为它让你远离混乱。

- Eliran Efron

Answer 4

$("#btnNoti5").click(function(){
    $("#notify").show();
});

$("#notify").click(function(){
    $("#notify").hide();
});

- bob