Question

当使用jQuery slideToggle()函数显示/隐藏表中新行的数据时，会导致它断断续续。然而，当使用slideToggle()显示/隐藏<div>时，它的工作非常顺利。

有谁能告诉我为什么会这样？

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>

Answer 1

提及border="0" cellspacing="0" cellpadding="0"

中的table

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

这将解决跳跃问题

以下是jsFiddle File

另外，对于滑动效果，您需要用div包装文本并将div放在td的内侧

这是更新后的jsFiddle File

Answer 2

我只是在我的js

中这样做

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

这会停止显示为行表格的tr标签，而不会使用幻灯片切换

Answer 3

幻灯片切换似乎在表格行上正常工作，其td内没有任何数据，所以如果你在td中滑动切换内容，那么它应该可以工作。

试试这个：

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

像这样使用：

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

这应该有效，也许并不完美，但这是我迄今为止最好的解决方案。如果有人找到更好的解决方案，请告诉我。

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>

（1）确保同时显示＆＃34; slideMe＆＃34; tr和＆＃34; div＆＃34;在＆＃34; slideMe＆＃34; tr这样：

$('.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向下滑动之前，tr内的div滑落。

***另外，确保在tr内部的div滑动之前tr滑动。

（3）最后，你可以调用toggleRow函数：

 toggleRow($('.slideMe'));

slideToggle（）on导致“跳转”

4 个答案: