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

使用

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

Answer 3

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

如何将多个jQuery函数压缩成一个简洁的函数？

3 个答案: