http://jsbin.com/fepugepude/edit?html,css,js,output demo
我的项目需要,所以就做了个简单的demo.
$("#sr").click(function(){
$(".show").show();
});
楼下的朋友给出了这个答案但问题的是
$(document).on('click',function(){
$(".show").hide();
});
$("#sr").click(function(){
$(".show").show();
});
$(document).on('click',function(){
$(".show").hide();
});
在一起的时候会把上面的盖掉~!不是我想要的需求。我的思路就这样
1步 先点击显示元素,
2步 再点击浏览器之内的随便地方,然后把第一步隐藏下来。
$('body').click(function (e) {
if (e.target === this) {
$('.show').hide();
}
});
$(document).on('click', '.toggle,.show',function(){
$(".show").show();
return false;
});
$(document).on('click',function(){
$(".show").hide();
});
这样子就行了,原理就是:在toggle和show上绑定点击事件 return fasle;阻止这个事件冒泡到document所以下面的事件就不会覆盖掉上面的事件了
最好把 body 调大一点儿,否则其他地方不算是网页的一部分。
$("#sr").click(function(e){
$(".show").show();
e.stopPropagation();
});
$(".show").click(function(e){
e.stopPropagation();
});
$(document.body).click(function(){
$(".show").hide();
});
通过记录target
,判断是否点击了之前的元素,你把js改成我这个试试吧
var srTarget;
$("#sr").click(function(e){
srTarget=e.target;
$(".show").show();
});
$("html").click(function(event) {
if (event.target !=srTarget) {
$(".show").hide();
}
});
$(document).on('click',function(){$('div').hide()})