- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- jQuery怎样实现任意点击隐藏div的效果？
jQuery怎样实现任意点击隐藏div的效果？
Admin 2021-12-29 群英技术资讯 920 次浏览
jQuery怎样实现任意点击隐藏div的效果？我们一些网站经常能看到通过点击任意位置后关闭打开div的效果，这样的好处是能提高用户的体验，那么具体怎样实现这一效果呢？
本教程操作环境：windows10系统、jquery3.2.1版本、Dell G3电脑。
jquery怎样点击任何地方隐藏div
在jquery中可以利用hide()方法和click()方法实现点击任何地方隐藏div效果。
click()方法当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。
示例如下：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").click(function(){
$("div").hide();
});
});
</script>
<style type="text/css">
div{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>输出结果：
以上就是用jQuery实现任意点击隐藏div的效果的方法介绍，上述示例具有一定的借鉴价值，有需要的朋友可以了解看看，希望对大家学习jQuery的使用有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。
文本转载自PHP中文网
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
React setState的用法是怎样的，有何用处
这篇文章主要介绍了React setState数据更新机制的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
-
stylelint如何安装和配置，正确的使用是怎样的
eslint的配置引入比较简单，网上有比较多的教程，而stylelint的教程大多语焉不详。在这里，我会介绍一下我在引入stylelint所遇到的坑，以及解决方法
-
JS函数上下文规则包括什么，具体应用是怎样
上下文是从英文context翻译过来，指的是一种环境。在软件工程中，上下文是一种属性的有序序列，它们为驻留在环境内的对象定义环境。在对象的激活过程中创建上下文，对象被配置为要求某些自动服务。又比如计算机技术中，相对于进程而言，上下文就是进程执行时的环境
-
Vue前后端数据交互怎么实现，要点是什么
将后端所计算的数据呈现在前端页面的相应位置并根据用户点击操作改变相应的数据和界面，再传值给后端。该技术是Web开发必备，是前后端交互的纽带。
-
async和await实现同步的代码怎样写的
首先我们假设有一方法 readFile 可以读取文件内容, 但是它是异步的。var gen = function* (){ var a = yield readFile('./a.txt'); console.log(a.toString());
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
