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')"错误的，在萤火虫中返回错误）。我怎样才能做到这一点？

我不能交换到 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 回答