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;    

}

但动画不流畅？我做错了什么？请检查链接并为我更新 link 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();
});

有关详细信息，请参阅：

How to Use slideDown (or show) function on a table row?

Answer 2

我永远不会使用jQuery来执行slideToggle。嗯，最关键的部分是 - 它受到JS的影响。使用CSS3过渡，以启用GPU加速。

查看this了解CSS3 slideToggle（无脚本-moz-transition）

或 -webkit-transition，{{1}}（如果您希望在混合应用上实现平滑过渡，就像使用phonegap一样）

Answer 3

我建议不要将带有内联样式的行添加到display：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);
});

slidetoggle行不顺畅

4 个答案: