- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- jQuery怎样实现任意点击隐藏div的效果？
jQuery怎样实现任意点击隐藏div的效果？
Admin 2021-12-29 群英技术资讯 553 次浏览
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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
怎样用JS写一个加减乘除的计算器？
怎样用JS写一个加减乘除的计算器？加减乘除的计算器是JavaScript学习中一个比较常见的练习，想要实现这个效果并不困难，接下来我们就一起来了解一下，感兴趣的朋友可以参考下文的代码。
-
Next.js使用用来做什么，具体是怎样的
Next.js 是一个轻量级的 React 服务端渲染应用框架。文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
-
用vue怎样实现dialog封装？方法是啥?
今天给大家分享的是关于vue实现dialog封装的内容，小编觉得挺实用的，因此分享给大家做个参考，下文还介绍了Vue2 写法、Vue3 插件版写法和Vue3 动态组件写法等等，感兴趣的朋友就继续往下看吧。
-
Vue组件的date需是函数为什么，如何用代码说明
Vue组件为什么data必须是一个函数？我们需要先复习下原型链的知识，其实这个问题取决于 js ，而并非是 vue 。
-
node如何连接mysql并进行增删改查和事务操作
本文主要介绍了node连接mysql查询事务处理的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
