代码之家 › 专栏 › 技术社区 › Misiur

jQuery.next()元素

slideup html-table html jquery javascript

0

Misiur · 技术社区 · 15 年前

这种来自mootools的变化让我发疯。

<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')"

1 回复 | 直到 8 年前

1

2

Matthew Flaschen 15 年前

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

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

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

错误是因为您试图访问 $ 属性,该属性不存在。相反,我们可以使用 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 演示。