slidetoggle对行工作不顺利

Question

HTML:

<table>
 <tr class="tab">
    <td>
        1
    </td>
    <td>
        2
    </td>
    <td>
        3
    </td>
</tr>
<tr style="display:none">
    <td colspan="3">hidden</td>
</tr>
<tr class="tab">
<td>first</td>
<td>second</td>
<td>third</td>
</tr>
</table>

JS:

$(".tab").click(function() {
    $(this).next().slideToggle();
});

CSS：

.tab
{
    background: grey;
    padding: 5px;
    color: white;    
}

但是动画不流畅？我做错了什么？请检查链接并为我更新链接http://jsfiddle.net/67rHW/9/?

谢谢你抽出时间。

Answer 1

表在jQuery动画中表现不佳。尝试将要显示/隐藏的内容包装在块元素(如div(中，然后进行切换。此外，删除cellpadding和cellspacing，然后根据需要使用CSS添加填充。

http://jsfiddle.net/67rHW/11/

HTML

<table cellpadding="0" cellspacing="0" border="0">
    <tr class="tab">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr class="nopadding">
        <td colspan="3"><div style="display:none">hidden</div></td>
    </tr>
    <tr class="tab">
        <td>first</td>
        <td>second</td>
        <td>third</td>
    </tr>
</table>

CSS：

td {
    padding: 5px;
}
tr.nopadding td {
    padding: 0;
}
tr.nopadding td > div {
    padding: 5px;
}
.tab {
    background: grey;
    padding: 5px;
    color: white;
}

JavaScript:

$('.tab').click(function() {
    $(this).next().find('div').slideToggle();
});

有关更多信息，请参阅：

1. 如何在表格行上使用slideDown(或show(功能

Answer 2

我永远不会用jQuery来做滑动切换。嗯，最关键的部分是，它受到JS的影响。使用CSS3转换，以启用GPU加速。

查看CSS3幻灯片切换(无脚本-moz-transition(

或这个，对于-webkit-transition(如果你想在像phonegap这样的混合应用程序上进行平滑转换(

Answer 3

我建议不要添加内联样式的行来显示：none。但是，将一个类添加到要设置为隐藏的下一行。如果禁用JS，它将使表中的内容不可访问。在表格单元格中插入div以实现平滑滑动。

$('.hidden-row')
.children('td')
.css('padding', 0)
.wrapInner('<div />');
$('.hidden-row div').hide();
$(".tab").click(function() {
  $(this)
  .next()
  .find('td')
  .css('padding', '');
  $(this)
  .next()
  .find('div')
  .slideToggle(function() {
      if($(this).is(':hidden')) {
        $(this).parent('td').css('padding',0);
      }
  });
});
<tr class="hidden-row">
  <td colspan="3">hidden</td>
</tr>

table {
    border-collapse: collapse;
}
tr {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #fff;
}
td {
    background: grey;
    color: white;
    padding: 5px; 
    text-align: center;
}

http://jsfiddle.net/puKY7/61/

Answer 4

您可以让div表现得像表，但遗憾的是，您会遇到同样的问题。我发现——当你试图隐藏行时——它看起来很糟糕，当你试图从行中隐藏图像时——它看上去更好；很近，但没有雪茄。只有为每个图像创建一个DIV包装器，它才会看起来很好。

看看这里：http://jsfiddle.net/67rHW/35/

html

<button id='b1'>1</button>
<button id='b2'>2</button>
<button id='b3'>3</button>

<div id='table1_style'class='ui_table'>
    <div id='row0_style' class='ui_row'>
        <div class='ui_cell_wrapper '>
            <img class='i'>
        </div>
        <div class='ui_cell_wrapper '>
            <img class='i'>
        </div>
    </div>
    <div id='row1_style' class='ui_row'>
        <div class='ui_cell_wrapper'>
            <div class='w2'>
            <img id='' class='i img2' >
            </div>
        </div>
        <div class='ui_cell_wrapper w2'>
            <div class='w2'>
            <img id='' class='i img2'>
            </div>        
        </div>
    </div>                    
    <div id='row2_style' class='ui_row'>
        <div class='ui_cell_wrapper '>
            <img id='' class='i' src="">
        </div>
        <div class='ui_cell_wrapper '>
            <img id='' class='i'>
        </div>
    </div>           
</div>

CSS

.ui_table{
    width:100%; 
    display: table; 
}
.ui_row{
    width:100%; 
    display: table-row;
    border-spacing: 0px;
}
.ui_cell_wrapper{
    border:solid black 1px;
    position:relative;
    display: table-cell;
    width: 16%;
    vertical-align: middle;
    text-align: center;
}

Javascript

$('.i').attr('src', "http://qrcode.kaywa.com/img.php");
$('#b1').click(function(){
    $('.img2').add($('.w2')).show(); 
    $('#row1_style').toggle(1000);
});
$('#b2').click(function(){
    $('#row1_style').add($('.w2')).show();    
    $('.img2').toggle(1000);
});
$('#b3').click(function(){
    $('#row1_style').add($('.img2')).show();  
    $('.w2').slideToggle(1000);
});