3

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

我有：

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

请帮我。非常感谢。

4

4 回答 4

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

小提琴

于 2013-06-02T18:35:55.973 回答
3

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

$(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;
});
于 2013-06-02T20:00:41.447 回答
1

我喜欢用一个技巧来处理这样的事情。

在 jQuery 库中：

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

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

而不是检查它是否显示：

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

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

所以我正在做的是：

当显示 - 单击时添加类“显示” - 检查是否有类“显示”而不是删除类。

希望你能找到使用我的把戏的方法:)

当事情如此图形化时，它使做事情变得非常容易。不太喜欢我的方法——但我喜欢，它让你远离混乱。

于 2013-06-02T18:42:05.800 回答
0 
$("#btnNoti5").click(function(){
    $("#notify").show();
});

$("#notify").click(function(){
    $("#notify").hide();
});
于 2013-06-02T18:32:56.093 回答