Упрощение функции .click в jQuery

Question

Скажем, у меня есть тег <label> с идентификатором #trigger, который должен вызывать событие .hide(); для элемента .target при щелчке. Нажав на любой другой элемент, кроме #trigger, следует снова показать .target. Вот мой код, который работает, но я чувствую, что его можно упростить.

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

Я думаю, что это может быть упрощено с условным?

Answer 1

Если не анимировать показать/скрыть действие не является проблемой, вы можете использовать toggle метод, который принимает логическое значение:

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

Answer 2

Вам нужно увидеть, не нажмете ли вы на #target или его дочерние объекты скрывают целевое шоу.

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

Обновлено скрипку http://jsfiddle.net/vd8ddgra/1/