【Javascript学习笔记】
目录
点击任意位置关闭某处
而且点击对应处并不会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>
<div class="search">
<form action="">
<input type="text" placeholder="请输入相关搜索内容">
<a href="javascript:alert('敬请期待')!"><img src="search.png" alt=""></a>
</form>
</div>
<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学习笔记的目录 Click Here>>
github源码下载 Click Here>>