Javascript 滑入表同级

我目前正在使用此代码：

<script type="text/javascript">
    function toggleSibling(sibling)
    {
          sibling = sibling.nextSibling;
          while(!/tr/i.test(sibling.nodeName))
          {
              sibling = sibling.nextSibling;
          }
          sibling.style.display = sibling.style.display == 'table-row' ? 'none' : 'table-row';
    }
</script>

函数切换同级（同级）
{
sibling=sibling.nextSibling；
while（！/tr/i.test（兄弟节点名））
{
sibling=sibling.nextSibling；
}
sibling.style.display=sibling.style.display==‘表行’？‘无’：‘表行’；
}

为我的表切换兄弟姐妹。但点击后它会立即出现。我想知道是否有办法让它滑入，而不是仅仅出现

演示：jsfiddle.net/82XN3/1 谢谢。

部分解决方案：

您可以使用

$（同级）.slideToggle（）代替直接编辑显示


看起来行高不能小于内容高度，因此它会弹出内容高度，然后在其余部分滑动。您可以将内部元素包装到div中，并设置div的height和overflow属性来解决此问题。
您可以使用

$(sibling).slideToggle();

而不是

sibling.style.display = sibling.style.display == 'table-row' ? 'none' : 'table-row';

但它有点吸表行，当它达到最小高度时，它立即隐藏

演示1:

例如，我建议使用div代替table

HTML

<div class="norm">
    123
</div>
<div class="norm sun">
    123
</div>

JavaScript

$('.sun').hide()

$('.norm').click(function() {

    $(this).next().slideToggle()

})

它工作得更顺畅

演示2:

您可以根据需要调整代码。请注意，使用jQuery然后使用标准JS实现遍历DOM要容易得多
Plz现在发布一个关于DOM行为的演示演示演示：单击文本，它会打开子文本，但我希望它能够滑入，而不仅仅是立即弹出。ThxOK。谢谢，我会考虑用div代替表谢谢，但是行是坏选择。
$('.sun').hide()

$('.norm').click(function() {

    $(this).next().slideToggle()

})