여러 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'); 
    });