javascript - 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”类时，我想用动画显示/隐藏 tr 类 teamval 。但是，我无法使其正确动画化。看起来“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演示。