Question

我目前正在使用此代码：

<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>

为我的桌子切换兄弟姐妹。但点击后立即出现。我想知道是否有任何方法可以让它滑入而不只是出现。

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

Answer 1

部分解决方案：

您可以使用$(sibling).slideToggle();

，而不是直接编辑显示

http://jsfiddle.net/5yu45/

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

Answer 2

您可以使用

$(sibling).slideToggle();

而不是

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

但它有点糟糕的表行，当它达到最小高度时它会立即隐藏

演示1：http://jsfiddle.net/82XN3/2/

而不是表格我建议使用DIV，例如

<强> HTML

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

<强> CSS

.norm {border: solid 1px red; width:200px;height:50px}

<强>的JavaScript

$('.sun').hide()

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

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

})

它工作得更顺畅

演示2：http://jsfiddle.net/82XN3/3/

您可以根据需要调整代码。请注意，使用jQuery然后使用标准JS实现来遍历DOM要容易得多

滑入表格同级

2 个答案: