Question

我有一个目录，默认情况下显示3行，点击更多时会显示所有行。但是有一个混蛋。

here is the link to jsfiddle我需要一些平滑的效果，所以我使用slideUp和slideDown而不是show或hide。显示或隐藏工作正常。

我尝试在脚本中设置表的高度，但它没有帮助。对这个混蛋的任何帮助..

var numShown = 3; // Initial rows shown & index
    var $table = $('table').find('tbody');  // tbody containing all the rows
    var numRows = $table.find('tr').length; // Total # rows

    $(function () {

        // Hide rows and add clickable div
        if (numRows > numShown){
            $table.find('tr:gt(' + (numShown - 1) + ')').hide().end();
            $('#more-less a').show();
            $('#more-less a').click(function() {
                $('table').css('height',$(this).height);
                if (numRows > numShown){
                    numShown = numRows;
                    $('#more-less a').html("Show less");
                    $('#more-less a').attr('class','less');
                    $table.find('tr:lt(' + numShown + ')').slideDown();
                }
                else{
                    numShown = 3;
                    $table.find('tr:gt(' + (numShown - 1) + ')').slideUp().end();
                    $('#more-less a').html("Show more");
                    $('#more-less a').attr('class','more');

                }
            });
        }
        else{
            $('#more-less a').hide()
        }
    });

Answer 1

slideDown()需要明确给出尺寸，以便最后抽搐。

在您的情况下使用show()和hide()功能，这可以避免生涩

jsfiddle

Answer 2

这是一个布局工作。设置CSS类如下：

.height-30
{
  min-height: 30px;
  height: 30px;
}

并将其应用于您的细胞。使用隐式大小时，初始布局被重新调整时通常会出现这种情况。

Answer 3

我以不同的方式做到了并且摆脱了混蛋。

将表格包裹在div中并使用animate（）来设置动画高度。这是工作Fiddle for your reference

var $table=$('.tableContainer');
var aH=$('table').css('height');
var h=0;
var numOfRows=3;
$('table tr').each(function(indx, obj){
    if(indx<numOfRows){

    h+=$(obj).height();
    }



});
var heightToHide=h+5;       
$table.css('height',heightToHide);
$('.more').click(function(){    
$table.animate({height:aH});
});
$('.less').click(function(){
$table.animate({height:heightToHide});
});

更新：添加了一个完美的小提琴：check that out here

显示更多抽搐 - jquery

3 个答案: