Practical combat of DOM in Javascript learning, jQ realizes the effect of clicking anywhere to close a certain place (often used in the mask layer behind the modal box)
and clicking the corresponding place will not hide yourself
//点击文档任意处都触发该事件$(document).mousedown(function(e){ //只有当某对象存在时才会有的点击任意处出现的事件效果 if($(e.target).parents(".search").length==0){ $("xxx").slideToggle(300);//显示隐藏 } })
I took out some of the following web pages in practice, so the final style may be different.
The idea is
//点击文档任意处都触发该事件$(document).mousedown(function(e){ if(想要显示的对象如果是在显示状态时才有以下的触发效果){ //只有当某对象存在时才会有的点击任意处出现的事件效果 if($(e.target).parents(".search").length==0){ $("xxx").slideToggle(300);//显示隐藏 } } })
html part
<!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 part
// 搜索框的出现&&隐藏$(".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; } })
Related articles:
jQuery realizes the effect of closing the pop-up layer outside the pop-up layer by clicking anywhere
Related video:
Detailed explanation of the basics of DOM exploration
The above is the detailed content of DOM case sharing—jQ realizes the effect of clicking anywhere to close a certain place. For more information, please follow other related articles on the PHP Chinese website!