DOM案例分享—jQ实现点击任意位置关闭某处的效果
- php是最好的语言原创
- 2018-08-02 10:07:161606浏览
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;
}
})相关文章：
JavaScript单击网页任意位置打开新窗口与关闭窗口的实现代码
相关视频：
以上是DOM案例分享—jQ实现点击任意位置关闭某处的效果的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn