< tr>上的slideToggle()导致“跳跃". [英] slideToggle() on <tr> causes "jump"

问题描述

当使用jQuery slideToggle()函数在表中的新行上显示/隐藏数据时，它将导致数据结结.但是，当使用slideToggle()显示/隐藏<div>时，它的运行非常顺畅.

When using jQuery slideToggle() function to show/hide data on a new row in a table it causes it to stutter. Yet, when using slideToggle() to show/hide a <div> it works very smoothly.

谁能告诉我为什么会这样?

Can anyone tell me why this happens?

小提琴示例: http://jsfiddle.net/gLGUG/

jQuery代码:

$("tr").click(function () {
    $(".slideMe").slideToggle();
});

$(".slideMeDiv, button").click(function () {
    $(".slideMeDiv").slideToggle();
});

HTML标记:

<table>
    <tr>
        <td>One Row</td>
    </tr>
    <tr>
        <td>Click me</td>
    </tr>
    <tr class="slideMe">
        <td>SlideDOWN</td>
    </tr>
</table>
<br />
<button>Slide Div</button>

<div class="slideMeDiv">
    Slide me as well
</div>

推荐答案

在table

<table width="100%" border="0" cellspacing="0" cellpadding="0">

这将解决跳跃问题

这是 jsFiddle文件

为获得滑动效果，您还需要用div包裹文本并将div放在td内

Also for sliding effect you need to wrap your text with a div and place the div in-side the td

这是更新的 jsFiddle文件

这篇关于< tr>上的slideToggle()导致“跳跃".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！