2

希望有人能帮忙！我是 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-->

提前谢谢了...

4

3 回答 3

5

您可以使用类选择器和next方法，this在处理程序的上下文中引用单击的元素。

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

注意：DIV 元素没有默认操作，因此return false除非您想停止事件的传播，否则您不需要。

于 2013-03-07T17:47:16.253 回答
1

采用

 $('.docTitle').click(function() {
    $(this).slideToggle('fast');
    });
于 2013-03-07T17:51:43.687 回答
0 
$('#toggle1,#toggle2,#toggle3,#toggle4').click(function() {
    $('.toggle').slideToggle('fast');
    return false;
    });
于 2013-03-07T17:47:39.887 回答