在<tr>上使用slideToggle()会导致“跳动”问题

Question

当在表格中使用 jQuery 的 slideToggle() 函数来显示/隐藏新行中的数据时，它会导致卡顿。但是，当使用 slideToggle() 来显示/隐藏 <div> 时，它非常流畅。

有人能告诉我为什么会出现这种情况吗？

Fiddle 示例：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>

- 97ldave

---

.slideToggle() 可以用于表格行。 - Spokey

是的，我知道它能工作...但是如果你看一下我的fiddle示例，它会导致“卡顿”。 - 97ldave

https://dev59.com/GXRB5IYBdhLWcg3w6bcE - Brendan Bullen

我的意思是那个百叶窗。slideToggle由于某些原因不支持tr，你要么滑动它的内容，要么将其包装在一个div中。 - Spokey

@limelights 这个对我来说仍然有卡顿。 - 97ldave

Answer 1

在标签中提到border="0" cellspacing="0" cellpadding="0"

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

这将解决跳跃问题。

这是jsFiddle文件。

---

此外，为了实现滑动效果，您需要用一个div包裹您的文本，并将该div放置在td内部。

这是更新后的jsFiddle文件。

。

- Roy Sonasish

---

它在谷歌浏览器中也没有跳转。 - Roy Sonasish

虽然口吃已经停了，但那里不再有幻灯片了。 - 97ldave

对于幻灯片，您需要使用 div 包装文本，并将 div 放置在 td 内部。 - Roy Sonasish

Answer 2

我只是在我的js中这样做。

$(document).ready(function(){
    $('tr').click(function(){
        $('.slideMe').slideToggle();
        $('.slideMe').css("display", "block")
    });
});

这会防止 tr 标签以表格行的形式显示，这种形式在滑动切换中不起作用。

- BritishSam

---

嗯，我尝试过这个，可以实现漂亮的滑动效果，但我的所有表格单元格都挤到了左边。 - Michael12345

@Michael12345 可能需要给它们固定的宽度，可以是单元格本身或者只是表头。或者尝试一下将其显示为 inline-block，这样就不必更改宽度了。 - BritishSam

Answer 3

如果在表格行中没有任何数据，则滑动切换似乎可以正常工作，因此，如果您滑动切换td内部的内容，则应该可以正常工作。

尝试这个：

function slideToggleRow(selector){
    $(selector).find("td").contents().slideToggle();
    $(selector).slideToggle();
}

使用方法如下：

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

这个应该可以用，可能不是完美的，但是这是目前我能找到的最好解决方案。如果有人发现更好的解决方案，请告诉我。

- user2704238

Answer 4

对于重构的表：

   <table>
     <tr>
         <td>One Row</td>
     </tr>
     <tr>
         <td>Click me</td>
     </tr>
     <tr class="slideMe">
         <td>
             <div class="tdDiv">SlideDOWN</div>
         </td>
     </tr>
   </table>

请确保像这样显示“slideMe” tr和“slideMe” tr的td内部的“div”：

$('.slideMe').show();
$('.slideMe').find('.tdDiv').show();

（2）使用此代码切换您的slideMe行

 function toggleRow(selector){
   if($(selector).css('display') == "none"){
      $(selector).find('.tdDiv').slideDown(200);
      $(selector).slideDown(200);
   }
   else{
      $(selector).slideUp(200);
      $(selector).find('.tdDiv').slideUp(200);
   }
}

***在 tr 的 td 中的 div 下滑之前，确保它先下滑。

***同样，在 tr 的 td 中的 div 上滑之前，确保它先上滑。

(3) 最后，您可以调用 toggleRow 函数：

 toggleRow($('.slideMe'));

- Isaac Alvarado