html:
view:
实现功能:
点击“行业分类”和“功能分类”,都会弹出下拉面板;
面板隐藏的情况下,两次点击同一个span,第一次弹出,第二次隐藏,如果连续两次点击的是不同span,面板不会隐藏....比如:第一次点击“行业分类”,下拉面板弹出,再点击“行业分类”下拉面板隐藏,如果第二次点击的是“功能分类”,下拉面板始终显示!
求一个简单的逻辑实现方式!!!
写问题时捋顺了思路,自己刚写了一个,有点复杂,可以指点一下:
我的代码:
var span=null;
点击span改变面板和面板背后的遮罩层显示状态
$(".child-nav>span").click(function(){
var other=this;
if(span==null||(span!=null&&span!=other)){
$(".grand-nav-wrap").show();//面板打开
$(".op-bg-talent").show();//遮罩层打开
}
if(span!=null&&span==other){
$(".grand-nav-wrap").toggle();//面板打开或者关闭
$(".op-bg-talent").toggle();//遮罩层打开或者关闭
}
span=this;
});
点击遮罩层关闭面板和遮罩层
$(".op-bg-talent").click(function(){
$(".grand-nav-wrap").hide();//面板关闭
$(".op-bg-talent").hide();//遮罩层关闭
});
不知道状况是不是对的,供参考!
HTML:
<ul class="nav">
<li><a href="javascript:;" data-toggle="panel">行业分类</a></li>
<li><a href="javascript:;" data-toggle="panel">功能分类</a></li>
</ul>
<div class="panel" style="display:none;">下拉面板</div>
<div class="backdrop" style="display:none;"></div>
CSS:
.nav {
padding-left: 0;
}
.nav li {
display: inline-block;
}
.panel {
position: fixed;
width: 400px;
height: 300px;
padding: 10px;
background-color: #fff;
}
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-color: #000;
opacity: .3;
}
JavaScript:
$(function() {
var set = $('.panel, .backdrop'),
obj = null;
$('.nav a[data-toggle="panel"]').click(function() {
var _this = this;
if (set.is(':hidden') || (obj == _this)) {
set.toggle();
}
obj = this;
});
$('.backdrop').click(function() {
set.toggle();
});
});