如图,假设代码如下:
<ul>
<li class="a"></li>
<li class="b"></li>
<li class="c"></li>
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
</ul>
// 点击A以外的元素关闭弹窗
$(document).mouseup(function(e){
var _con = $('.A'); // 设置目标区域
if(!_con.is(e.target) && _con.has(e.target).length === 0 ){
$('A).removeClass('display-block');
};
});
问题来了,点击a显示了A,点击A以外的元素关闭A,但是点击a的时候,看上去窗口没有关闭,其实是进行了关闭操作,紧接着进行了打开操作,如何使A窗口打开后a按钮变成关闭按钮或者失效(a失效,b有效,点击打开B),这应该和静止冒泡不是一回事吧?
$(".a").click(function(e){
if($('.A').hasClass('display-block')){
return false; //检测A是否已经打开,如果打开了就不执行操作;
}
})
这样你再执行其他事件的时候就不会再打开了
一般网站都不是你这种效果,硬要弄的话就用one来绑定。
$(".a").one("click",function(event){
$(".A").addClass("display-block");
event.stopPropagation();
})
$(document).on("click",function(event){
if($(event.target).closest(".A").length === 0 ){
$('.A').removeClass('display-block');
};
$(".a").one("click",function(event){
$(".A").addClass("display-block");
return false;
})
});
另一种方式,就是给a加一个透明遮罩层让他点不到。
还有一种方式,实现效果一样,实际实现方式逻辑并不一样。
$(".a").on("click",function(){
$(".A").toggleClass("display-block");
event.stopPropagation();
})
把addClass改成toggleClass,你点a看上去跟没有生效一样,其实是生效了的,效果是关闭A。