jQuery DRY Кодирование с .toggle/event

Question

Это моя первая попытка использования jQuery, и я очень доволен тем, как это работает, но у меня есть избыточный код, который я не могу почувствовать, может быть консолидирован. Есть ли DRY подход к следующей функциональности ?:

<script> 
// Button toggles div 
$("#first-button").click(function(){ 
    $("#first-div").toggle(); 
}); 

$("#second-button").click(function(){ 
    $("#second-div").toggle(); 
}); 

$("#third-button").click(function(){ 
    $("#third-div").toggle(); 
}); 

// if click not on button or div then hide div 
$(document).on('click', function(event) { 
    if (!$(event.target).closest('#first-button, #first-div').length) { 
     $('#first-div').hide(); 
    } 
}); 

$(document).on('click', function(event1) { 
    if (!$(event1.target).closest('#second-button, #second-div').length) { 
     $('#second-div').hide(); 
    } 
}); 

$(document).on('click', function(event2) { 
    if (!$(event2.target).closest('#third-button, #third-div').length) { 
     $('#third-div').hide(); 
    } 
}); 
</script> 

Answer 1

Попробуйте это:

function make_toggler(button_selector, toggle_selector){ 
$(button_selector).click(function(){ 
    $(toggle_selector).toggle(); 
}); 
$(document).on('click', function(event) { 
    if (!$(event.target).closest(button_selector+", "+toggle_selector).length) { 
     $(toggle_selector).hide(); 
    } 
}); 
} 

make_toggler("#first-button", "#first-div"); 
make_toggler("#second-button", "#second-div"); 
make_toggler("#third-button", "#third-div"); 

Answer 2

Если документ выложен последовательным способом (то есть, если каждая кнопка и ДИВ аналогичным образом связаны в HTML), вы можете просто дать им класс и применить к нему jQuery.

Say цель DIV является в родственной сразу после кнопки:

$('.toggler').click(function(){ 
    $(this).next('.toggle').toggle(); 
}) 

Использования классов и HTML отношений вы можете сохранить HTML и ваш JQuery простой и читаемый.