jquery实现点击显示与隐藏及点击其它区域隐藏

哈啰沃尔德

于 2019-05-24 11:12:44 发布

阅读量3.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： js 显示隐藏

本文链接：https://blog.csdn.net/ZHANGMMCSDN/article/details/90512480

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

博客介绍了在JS中实现元素显示隐藏的方法。先为document绑定click事件并排除所点击元素，利用e.target或e.srcElement获取触发事件的原始元素，还通过循环防止点击要显示元素的子元素时将其隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(document).click(function(e){
    if (!$(e.target).is('所点击的元素')){
        var e = e || window.event;
        var elem = e.target || e.srcElement;
        while (elem) { 
            if (elem.className && elem.className === '要显示的元素') {
                return;
            }
            elem = elem.parentNode;
        }
        $('要显示的元素').css('display','none');
    }
});

1、首先是为document绑定click事件,里面的判断是排除所点击的元素；

2、e.target 或 e.srcElement是为了获取触发事件的原始元素，也就是所点击的元素，这里做了个循环是为了防止点击到要显示元素的子元素，这样整个要显示的元素点击后通过直接return，则都不会隐藏。