0

mootoolsからのこの変更は私を夢中にさせます。

HTML

<tr class="teamicon">
    <td style="text-align: center;" width="100%" valign="middle">
    //Blahblah
    </td>
  </tr>
  <tr class="teamval">
    <td valign="middle" width="100%">
    //Blahblah
    </td>
  </tr>

達成したいこと。クラス「teamicon」をクリックすると、アニメーション付きのクラスteamvalでtrを表示/非表示にします。ただし、適切にアニメーション化することはできません。「teamval」の内部を最初にアニメーション化する必要があるようです（または私は間違っていますか？）。

私の試み：

jQuery(document).ready(function(){
$('.teamval').slideUp(400);
$('.teamicon').click(function(){
    if ($(this).next('tr').is(":hidden"))
    {   
        $(this).next('tr.teamval').$('td').slideDown(400, function(){
            $(this).next('tr.teamval').slideDown(400);
        });
    }
    else
    {
        $(this).next('tr.teamval').$('td').slideUp(400, function(){
            $(this).next('tr.teamval').slideUp(400);
        });
    }
});
});

OFC。これは間違って("$(this).next('tr.teamval').$('td')"おり、firebugでエラーが返されます）。どうすればこれを達成できますか？

ただし、divにスワップすることはできません。

4

1 に答える 1

2

次のいずれかを実行できます。

$(this).next('tr.teamval').slideDown(...) // whole tr

$(this).next('tr.teamval').find('td').slideDown(...) // td descendant

エラーは、$存在しないjQuery要素セットのプロパティにアクセスしようとしているためです。代わりに、現在のセット内の要素の一致する子孫を検索するfindを使用できます。

編集：

さて、私はあなたが欲しいと思います：

if ($(this).next('tr').is(":hidden"))
{   
    var nextTeamval = $(this).next('tr.teamval');
    nextTeamval.find('td').slideDown(400, function(){
        nextTeamval.slideDown(400);
    });
}

唯一の潜在的な問題は、teamvalがtd（ネストされたテーブル）内にtdを含むかどうかです。このjsFiddleデモを試すことができます。

于 2010-07-14T10:06:16.527 に答える