Jquery 滑动切换（）打开<；tr>；原因“；“跳跃”；

使用jQuery

slideToggle（）

函数显示/隐藏表中新行上的数据时，会导致数据断断续续。然而，当使用

slideToggle（）

来显示/隐藏

时，它工作得非常顺利

谁能告诉我为什么会这样

小提琴示例：

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>

一排
点击我
下滑


滑梯
也给我滑一下

在

表中提及
border=“0”cellspacing=“0”cellpadding=“0”

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



这将解决跳跃问题

这是你的电话号码


此外，为了获得滑动效果，您需要使用div包装文本，并将div放在td的一侧

这是更新后的
幻灯片切换在td中没有任何数据的表行上似乎可以正常工作，因此如果您在td中滑动切换内容，则应该可以正常工作

试试这个：

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

这样使用：

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

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

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

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

（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 td内的div滑下

***此外，确保tr的td内的div向上滑动之前，tr向上滑动

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

 toggleRow($('.slideMe'));

我只是在我的js中这样做

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

这将停止tr标记显示为表格行，该行不适用于滑动切换。slideToggle（）

适用于表格行。我知道它可以。。。但如果你看我的提琴例子，它会导致“口吃”，我是说快门<由于某些原因，代码>滑块切换不支持

tr

。你要么滑动它的内容，要么将它包装在一个div中。将

tr

包装在

div

中将是无效的HTML:）它不会在chrome中跳转，也不会在chrome中跳转。尽管口吃已经停止，那里不再有幻灯片。对于幻灯片，你需要用div包装文本，并将div放在td.Hmm的旁边，当我尝试这样做时，我得到了很好的滑动效果，但我所有的表格单元格都挤到了左侧。@Michael12345可能必须给它们固定的宽度，可能是单元格本身，也可能只是表格标题。或者不尝试此操作，但显示为内联块可能会起作用，您不必更改宽度。