javascript - 尝试用一种功能动态扩展不同的div

Question

我正在尝试能够使用相同的代码动态展开/折叠多个 div....

它是通过单击跨度(切换)来控制的，然后我试图获取下一个 id(将上下滑动的 div)

            $('span').toggle(
    function() {
$('#albumholder').slideToggle(600);
    $(this).html('-');},
    function() {
$('#albumholder').slideToggle(600);
    $(this).html('+');}

    );

此代码用于扩展 1 个 div...但假设我有一个 div

#downloadholder
#linksholder
etc...

如何使用相同的代码实现相同的效果？谢谢!

编辑

值得注意的是，我需要每个 div 独立切换。如果我单击影响#albumholder 的跨度上的加号按钮，它不应展开#downloadholder 或#linksholder

Answer 1

两种方式——

将它们添加到选择器中

$('#downloadholder, #linksholder') 

或为这些项目添加一个类

$('.toExpand')

<div id="downloadholder" class="toExpand" />
<div id="linksholder" class="toExpand" />

重新阅读您的问题，您可能想要获得 next分区？

$('#yourSpanElement').click(function() {
    $span = $(this);
    $yourDiv = $span.next('div');
   // do your magic :)
});

修改后的代码:

$('span').toggle(
    function() {
      var $span = $(this);
      $span.next('div').slideToggle(600);
      $span.html('-');
    },      
    function() {
      var $span = $(this);
      $span.next('div').slideToggle(600);
      $span.html('+');
    }
 );

您还可以检查下一个 div 外观:

$('span').click(function() {
  var $span = $(this);
  var $nextDiv = $span.next('div');
  if( $nextDiv.is(':visible') ) {
     $nextDiv.slideUp(600);
     $span.html('+');
  }else {
     $nextDiv.slideDown(600);
     $span.html('-');
  }
});