Question

//我搜索但没有运气，所以我开始一个新问题：）

我有：

<a class="icon hide-text" id="btnNoti5" href="#">Notification</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();
    }
});

请帮帮我。非常感谢你。

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

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

Answer 3

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

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

Answer 4

我喜欢使用这种技巧。

在jQuery库中：

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

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

而不是检查它是否显示：

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

.hasClass()也是jQuery库的一部分。并且jQuery库中的最后一个函数是：.removeClass()

所以我正在做的是：

show时 - 添加课程“show” 点击 - 检查是否有“show”类，而不是删除类。

希望你能找到使用我的技巧的方式：）

当它们如此图形化时，它很容易做到。不太喜欢我的方法 - 但我这样做，它让你远离混乱。

jQuery“显示/隐藏div点击”和“点击外面隐藏”不能一起工作

4 个答案: