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

让你知道这样的事情。

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

尝试使用一个函数动态扩展不同的div

2 个答案: