如何將多個jQuery函數壓縮爲一個簡潔的函數？

Question

希望有人能幫助！我是一個jQuery/JS新手。是否有一種簡單的方法可以將多個功能壓縮成一個。我正在使用jQuery來展開和摺疊一些隱藏的div。我已經在下面的代碼中正常工作了，但是可能有50+（而不僅僅是4），我認爲會有一種方法可以將它們壓縮爲優化名稱中的一小塊代碼。任何幫助將非常感激地收到。這裏的JS ...

$('#toggle1').click(function() { 
    $('.toggle').slideToggle('fast'); 
    return false; 
    }); 

    $('#toggle2').click(function() { 
    $('.toggle2').slideToggle('fast'); 
    return false; 
    }); 
    $('#toggle3').click(function() { 
    $('.toggle3').slideToggle('fast'); 
    return false; 
    }); 

    $('#toggle4').click(function() { 
    $('.toggle4').slideToggle('fast'); 
    return false; 
    }); 

和這裏的HTML ...

<div class="docBlocA"> 
    <div class="docTitle" id="toggle1">Document Title Goes Here (click to expand)</div> 
    <div class="toggle1" style="display:none; width:100%;">Hidden div content here</div> 
</div><!--docBlocA--> 

<div class="docBlocB"> 
    <div class="docTitle" id="toggle2">Document Title Goes Here (click to expand)</div> 
    <div class="toggle2" style="display:none; width:100%;">Hidden div content here</div> 
</div><!--docBlocB--> 

<div class="docBlocA"> 
    <div class="docTitle" id="toggle3">Document Title Goes Here (click to expand)</div> 
    <div class="toggle3" style="display:none; width:100%;">Hidden div content here</div> 
</div><!--docBlocA--> 

<div class="docBlocB"> 
    <div class="docTitle" id="toggle4">Document Title Goes Here (click to expand)</div> 
    <div class="toggle4" style="display:none; width:100%;">Hidden div content here</div> 
B</div><!--docBlocB--> 

提前感謝...

Answer 1

可以內使用類選擇和next方法，this處理程序的上下文引用被單擊的元素。

$('div.docTitle').click(function(){ 
    $(this).next().slideToggle('fast'); 
}); 

注意：DIV元素沒有默認操作，所以除非你想阻止事件的傳播不需要return false。

Answer 2

$('#toggle1,#toggle2,#toggle3,#toggle4').click(function() { 
    $('.toggle').slideToggle('fast'); 
    return false; 
    }); 

Answer 3

使用

$('.docTitle').click(function() { 
    $(this).slideToggle('fast'); 
    });