首页 建站教程 WEB前端 正文

如果通过jquery实现点击空白处隐藏元素

我们在网站开发的时候经常会有点击空白处去隐藏已有的元素,DIV或者其他,本次教给各人若何用jquery实现那个特效的办法。一款j...

我们在前端功能开发的时候经常会碰到点击按钮弹出元素,点击任意空白处时隐藏已弹出的元素,本文主要介绍如何通过Jquery来实现这个特效功能的方法。

如果通过jquery实现点击空白处隐藏元素 点击空白隐藏 图1

一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层、点击页面空白处隐藏弹出层代码,主要是通过$(document).click方法来操作,具体实现代码如下:

html代码

<div class="btn">按钮</div>
<div id="box">弹出层</div>

js代码

$('.btn').click(function (event) { 
    event.stopPropagation(); 
    $('#box').toggle(); 
    return false;
}); 
//点击任意空白隐藏box
$(document).click(function(event){
    var _con = $('#box'); 
        if(!_con.is(event.target) && _con.has(event.target).length === 0){
	    $('#box').hide();
	}
});
打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/185.html

相关推荐

纯css实现菜单或列表循环向上滚动效果

纯css实现菜单或列表循环向上滚动效果

在前端开发过程中,有时候针对某个模块需要无限循环的滚动一些消息或菜单,我们常用的方法基本上都是通过js来实现,虽然代码相对来说可能会精简一些,但是对于JS不是很熟悉的同学来说还是不太好理解,毕竟相对于...
WEB前端 2022.08.17 0 184
纯CSS3实现3D切换选项卡

纯CSS3实现3D切换选项卡

Tab选项卡是大家最常用的功能之一,因为兼容性的问题目前大多朋友也都是用js书写,当然我也会用JS去书写,必定web端的应用你的用户群体...
WEB前端 2022.08.16 0 297
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持