Javascript jQuery"；单击“显示/隐藏div”；及；单击“外部”以隐藏“外部”；不合作

//我搜索了一下，但运气不好，所以我开始问一个新问题：）

我有：

我想要这样：当我点击这个

a

，它会显示/隐藏一个div，当我点击这个div之外的时候，如果它是可见的，它会隐藏

我使用此代码来显示/隐藏。它工作得很好：

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

但当我添加此代码以隐藏用户单击外部时的div时，它实际上起作用了，但上面的代码停止了作用：第一次单击，它显示div。第二次单击：什么也没有发生。该部门并没有像预期的那样隐藏起来

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

请帮帮我。多谢各位

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

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

---

对于这样的事情，我喜欢使用一种技巧

在jQuery库中：

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

无论何时显示-添加一个名为“show”的类

而不是检查是否显示：

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

.hasClass（）

也是jQuery库的一部分。 jQuery库中的最后一个函数是：

.removeClass（）

所以我现在做的是：

显示时-添加类“显示” 单击-检查是否有类“显示”，然后删除类

希望您能找到使用我的技巧的方法：）

这使得在图形化的情况下做事情变得非常容易。

---

我不太喜欢我的方法，但我喜欢，它让你远离混乱。

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

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

---

if（divNotifi.is（“：visible”）{divNotifi.hide（）；}else{divNotifi.show（）；}

只需使用：

divNotifi.toggle（）

试试this@gdoron和@VJD：谢谢。我知道这个。但是如果我使用

toggle（）

，问题仍然存在：谢谢。我试试这个。嗯。。。。您能解释一下我的代码中出现问题的原因吗？第一个click函数没有正确关闭，第二个函数确实工作，但在单击

divNotifi

元素时不起作用，因为

has（）

检查

目标
是否在
divNotifi
内，因此，您必须单击
divNotifi
中的某个元素，而不是该元素本身。现在一切正常。谢谢您的解答和解释。@Hugo Mallet我可以知道container.has（e.target）.length==0的含义吗？为什么在第二次单击事件处理程序中需要返回false？谢谢
$(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;
});