简化。在jQuery中单击函数

假设我有一个id为

#trigger

的

标记，它应该触发

.hide（）的代码>事件。目标
。单击除
#trigger
之外的任何其他元素，应再次显示
.target
。这是我的代码，它可以工作，但我觉得它可以简化

$('ul#category li label#trigger').click(function() {
    $('.target').hide(500);
});
$('ul#category li label:not(#trigger)').click(function() {
    $('.target').show(500);
});

我想这可以简化为一个条件
 您需要查看您是否没有单击
#target
或其子对象hide target else show

$(document).on('click', function(e){
    var that = $(e.target);
    if(that.prop('id')!='trigger' || that.closest('#trigger').length===0){
       $('.target').show(500);
    }else{
        $('.target').hide(500);
    }
});

更新的Fiddle
如果不设置显示/隐藏动作的动画不是问题，则可以使用接受布尔值的
切换方法：

$('ul#category li label').click(function() {
     $('.target').toggle(this.id !== 'trigger');
});

另一个选择是：

var $target = $('.target');

$('ul#category li label').click(function() {
    var method = this.id === 'trigger' ? 'hide' : 'show';
    $target[method](500);
});

由于ID必须是唯一的，
ul#category li label#trigger
可以减少到
#trigger
，而
ul#category li label:not（#trigger）
可以减少到
：not（#trigger）
。