如何实现这个下拉面板的逻辑？

Question

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();//遮罩层关闭
});

Answer 1

不知道状况是不是对的，供参考！

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();
    });
});