15

当使用 jQueryslideToggle()函数在表格的新行上显示/隐藏数据时，它会导致它结结巴巴。然而，当slideToggle()用于显示/隐藏 a<div>时，它工作得非常顺利。

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

小提琴示例：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>
4

4 回答 4

6

提到border="0" cellspacing="0" cellpadding="0"在table

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

这将解决跳跃问题

这是jsFiddle 文件

同样对于滑动效果，您需要用 div 包装文本并将 div 放在 td 内

这是更新的jsFiddle 文件

于 2013-06-14T10:17:36.160 回答
1

我只是在我的 js 中这样做

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

这会停止 tr 标签显示为表格行，这不适用于滑动切换

于 2016-06-09T10:48:14.553 回答
0

对于重组表：

   <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) 确保在“slideMe”tr 的 td 中同时显示“slideMe”tr 和“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 向下滑动之前向下滑动。

***另外，请确保 tr 在 tr 的 td 内的 div 向上滑动之前向上滑动。

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

 toggleRow($('.slideMe'));
于 2015-02-27T22:34:41.653 回答
0

滑动切换似乎在其 td 内没有任何数据的表格行上工作正常，因此如果您 slideToggle td 内的内容，那么它应该可以工作。

尝试这个：

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

像这样使用：

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

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

于 2013-09-27T18:13:21.033 回答