1

同じコードで複数の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 が展開されないはずです

4

2 に答える 2

5

ふたつのやり方 -

それらをセレクターに追加します

$('#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('-');
  }
});
于 2010-06-08T21:15:49.930 に答える
0

このような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('+');}
);});
于 2010-06-08T21:22:49.207 に答える