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
等...

如何使用相同的代码达到相同的效果？谢谢！

编辑

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

Answer 1

两种方式——

将它们添加到选择器中

$('#downloadholder, #linksholder') 

或为这些项目添加一个类

$('.toExpand')

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

重读您的问题，也许您想获得下一个div？

$('#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('-');
  }
});

Answer 2

让你 htmlr 像这样。

<span toggletarget="downloadholder>+</span>
<div id="downloadholder"></div>

然后制作你的javascript

$('span[toggletarget]').click(function () {$(this).toggle(
function() {
    $("#"+$(this).attr("toggletarget")).slideToggle(600);
    $(this).html('-');},
function() {
$('#albumholder').slideToggle(600);
$(this).html('+');}
);});