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部分
backspacing

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单击网页任意位置打开新窗口与关闭窗口的实现代码
相关视频:










