Jquery:常见问题样式

Question

我有以下几点：

<table class="site">
<tr>
    <td>
        <span style="float: right;" class='show'>Show More</span>
    </td>
</tr>
<tr class="site_info">
   <td><%= site.id %></td>
</tr>
<tr>
    <td align='right'>
More
    </td>
</tr>
</table>

任何时候有人点击".show"，我希望它显示".site_info“(在启动时隐藏)。我尝试了很多方法，包括：

$('.site_info').hide().css('cursor', 'pointer');
$('.show').click(function() {
    $(this).find('.site_info').slideToggle();
});

我似乎就是找不到/选择不到site_info部分。

Answer 1

$('.site_info').hide().css('cursor', 'pointer');
$('.show').click(function() {
    $(this).parents( "table" ).find('.site_info').show( "slideToggle" );
});

Answer 2

find命令仅搜索当前元素的后代。

试试这个..。

$(this).parents("table").find(".site-info").slideToggle();

Answer 3

$(".site_info").hide().css("cursor", "pointer");
$(".show").click(function() {
    $(this).closest("table.site").find("tr.site_info").slideToggle();
});