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

How can i hide an element by clicking anywhere except on that element

本文关键字：元素 任何 位置 隐藏 何通过 单击      更新时间：2023-09-26

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

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

但除此之外，如果用户单击文档上除该元素之外的任何位置，我希望该元素淡出。 为此使用哪行代码？

我的伪代码会读成这样,...

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

我知道有一个jQuery not选择器，但我更喜欢使用其他东西。 Not 选择器会占用太多处理器资源。

检查整个文档是否有点击。如果点击的目标不是您的元素，请执行您必须执行的操作。

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

呼应约翰·史密斯的完整性： 

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

使用"not"，例如：

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

你可以使用 

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

假设您在取消选择输入标签时使用此行为，则您正在寻找"blur"事件：

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

例如，当用户使用输入标签并按 TAB 时，也会触发此操作，这非常酷。

编辑：假设您不使用输入，执行此操作的不错方法是：

$('body').not("#searchBox").click(function() { $("#searchBox").fadeOut(); });
相关文章：