Question

我正在使用jQuery的切换方法在单击另一个页面元素时隐藏/显示页面元素。

jQuery('a#mobile-search-icon).click(function(){
    jQuery(‘#searchBox’).toggle('slow');
});

但除此之外，如果用户点击文档中除该元素之外的任何地方，我希望该元素淡出。什么是用于此的代码？

我的伪代码会读取类似的内容......

$(‘anywhere except #searchBox’).click(function(){
    $(‘#searchBox’).fadeOut();
})

我知道有一个jQuery而不是选择器，但我更喜欢使用别的东西。 not选择器太过处理器密集。

Answer 1

检查整个文档的点击次数。如果点击的目标不是你的元素，那就做你要做的事。

$(document.body).click(function(e) {
    if ($(e.target).attr('id') != 'searchBox') {
        $('#searchBox').fadeOut();
    }
})

回应约翰史密斯的完整性：

$(document.body).not("#searchBox").click(function() {
    $('#searchBox').fadeOut();
})

Answer 2

您可以使用

$('body').on('click',function()
{
    $('.notwanttotriggerhideclass').fadeOut();//hide your element
}) ;

然后在您不想隐藏的选择器上返回false：

$('.notwanttotriggerhideclass').on('click',function()
{

    return false;

});

或在点击功能上检测身体上的类并隐藏你的类：

$('body').on('click',function()
{
    if ($(e.target).attr('class') != 'notwanttotriggerhideclass')) 
    {
        $('.notwanttotriggerhideclass').fadeOut();//hide your element
    }

}) ;

Answer 3

假设您在取消选择输入标记时使用此行为，则表示您正在寻找“模糊”事件：

$( "#searchBox" ).blur(function() {
  $(this).fadeOut();
});

当用户使用输入标签并按下TAB时，这也会触发，这是非常酷的。

编辑：假设您没有使用输入，那么这样做的方法就不那么糟了：

$('body').not("#searchBox").click(function() { $("#searchBox").fadeOut(); });

Answer 4

使用＆＃34; not＆＃34;如：

$(document.body).not("#searchBox").on("click", someFunction...

如何通过单击除该元素之外的任何位置来隐藏元素

4 个答案: