DOM案例分享—jQ實現點擊任意位置關閉某處的效果
- php是最好的语言原創
- 2018-08-02 10:07:161589瀏覽
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