DOM案例分享—jQ实现点击任意位置关闭某处的效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了DOM案例分享—jQ实现点击任意位置关闭某处的效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3794字，纯文字阅读大概需要6分钟。
内容图文
Javascript学习中DOM的实战，jQ实现点击任意位置关闭某处的效果（常用于模态框后面的遮罩层）
点击任意位置关闭某处
而且点击对应处并不会hide掉自己
原理
//点击文档任意处都触发该事件$(document).mousedown(function(e){
//只有当某对象存在时才会有的点击任意处出现的事件效果
if($(e.target).parents(".search").length==0){
$("xxx").slideToggle(300);//显示隐藏
}
})下列网页实战中我取出部分，因此最后看起来样式可能不相同。
其中思想是
//点击文档任意处都触发该事件$(document).mousedown(function(e){
if(想要显示的对象如果是在显示状态时才有以下的触发效果){ //只有当某对象存在时才会有的点击任意处出现的事件效果
if($(e.target).parents(".search").length==0){
$("xxx").slideToggle(300);//显示隐藏
}
}
})效果
代码
html部分
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>backspacing</title>
<style type="text/css">
html{ background: #666; }
.topList{ float: right; margin-right: 36px; list-style: none; }
.topList li{ float: left; height: 35px; line-height: 35px; text-align: center; }
.topList a{ color: #fff; }
.topList a:active, .topList a:focus, .topList a:hover{ color: #fff; text-decoration: none; }
.searchBtn{ position: absolute; right: 0; top: 3px; width: 35px; height: 35px; }
.searchBtn img{ position: absolute; right: 0px; top: 7px; width: 16px; height: 16px; display: block; }
.search{ display: none; position: absolute; right: 0; top: 0; width: 190px; height: 35px; }
.search input{ position: absolute; right: 0px; top: 0px; width: 100%; height: 31px; border:0; border-bottom: 1px solid #fff; background: #89C997; color: #fff !important; padding-right:30px; }
.search input::-webkit-input-placeholder{ color: #fff; }
.search input::-moz-placeholder{ color: #fff; }
.search input::-ms-input-placeholder{ color: #fff; }
.search input::-moz-placeholder{ color: #fff; }
.search a{ position: absolute; right: 0px; top: 7px; width: 16px; height: 16px; border-radius: 25px; }
.search img{ width: 16px; height: 16px; }
</style></head><body><ul class="topList">
<li><a href="javascript:alert('敬请期待')!">理工首页 | </a></li>
<li><a href="javascript:alert('敬请期待')!">收藏本页 | </a></li>
<li><a href="javascript:alert('敬请期待')!">English</a></li></ul><a href="javascript:alert('敬请期待')!" class="searchBtn"><img src="search.png" alt=""></a><p class="search">
<form action="">
<input type="text" placeholder="请输入相关搜索内容">
<a href="javascript:alert('敬请期待')!"><img src="search.png" alt=""></a>
</form></p>
<script src="../jquery.min.js"></script>
<script src="backspacing.js"></script></body></html>js部分
// 搜索框的出现&&隐藏$(".searchBtn").click(function(){
$(".searchBtn").slideToggle(300);
$(".search").slideToggle(300);
$(".topList").slideToggle(100);
});
$(document).mousedown(function(e){
if(!($(".search").is(":hidden"))){ if($(e.target).parents(".search").length==0){
$(".searchBtn").slideToggle(300);
$(".search").slideToggle(300);
$(".topList").slideToggle(100);
}
}else{ return false;
}
})相关文章：
jQuery实现点击任意位置弹出层外关闭弹出层效果
JavaScript单击网页任意位置打开新窗口与关闭窗口的实现代码
相关视频：
DOM探索之基础详解篇
以上就是DOM案例分享—jQ实现点击任意位置关闭某处的效果的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的DOM案例分享—jQ实现点击任意位置关闭某处的效果全部内容，希望文章能够帮你解决DOM案例分享—jQ实现点击任意位置关闭某处的效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。