用Jquery实现寻找父元素的同辈元素的第一个子元素

Question

<table>
<tr>
<td id="title">标题</td>
</tr>
<tr>
<td style="display:none">
<table><tr><td>这里是内容</td></tr></table>
</td>
</tr>
</table>
用Jquery实现 点击标题td时 切换显示<td style="display:none">里的内容也即是实现寻找父元素的同辈元素的第一个子元素如何实现呢？$()(function(){
$("#title").toggle(
function(){$(this).parent().siblings().show();},
function(){$(this).parent().siblings().hide();}
)
})上面语句需要做哪些改进？

Answer 1

这样可以吗
<table border="1">
<tr>
<td id="title">标题</td>
</tr>
<tr style="display:none">
<td>
<table><tr><td>这里是内容</td></tr></table>
</td>
</tr>
</table>
<script type="text/javascript">
<!--
$(document).ready(function(){$("#title").toggle(
function(){$(this).parent().siblings(":eq(0)").css("display","block");},
function(){$(this).parent().siblings(":eq(0)").css("display","none");}
)
}
)
//-->
</script>

Answer 2

$("#title").toggle(
        function(){
            $(this).parent().next().find("td:first").show();
        },
        function(){ 
           $(this).parent().next().find("td:first").hide();
        }
   )这样也行 。

Answer 3

.toggle(
function(){$(this).parent().siblings().children().first().show();},
function(){$(this).parent().siblings().children().first().hide();}
);