jQuery .next（）元素

Question

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。

Answer 1

您可以执行以下操作之一：

$(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演示。