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

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

如果通过jquery实现点击空白处隐藏元素,cdd035b73824f6f1.jpg,分享,教程,百度,技术,经验,JavaScriptJavaScript教程,js教程JavaScript,HTML,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();   }  });


相关文章

您需要 登录账户 后才能发表评论

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注