幻灯片表兄妹

我目前使用此代码：幻灯片表兄妹

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

来源

2014-01-29 Ginters Ozols

Plz在http://jsfiddle.net上发布演示现在它的行为如何 –

演示：http://jsfiddle.net/82XN3/1/点击文本和它打开了潜台词，但我希望它不会立即弹出。 Thx –

您可以使用

$(sibling).slideToggle();

，而不是

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

但它有点吸上表中的行，当它达到最小高度，它隐藏瞬间

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

Ins表TEAD我建议使用的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更容易

来源

2014-01-29 15:40:20

好的。谢谢我会考虑使用divs而不是table –

部分解决：

，而不是直接编辑显示，你可以使用$(sibling).slideToggle();

http://jsfiddle.net/5yu45/

看起来像行的高度不能小于含量高，所以它的持久性有机污染物'的内容高度，并滑动其余的方式。您可能能够将内部元素封装在div中，并设置div的高度和溢出属性来解决此问题。

来源

2014-01-29 15:34:21

感谢您的回答，但是使用行是不好的选择 –

幻灯片表兄妹

回答

相关问题