显示更多抽搐 - jquery

时间:2014-04-09 13:08:34

标签: jquery css

我有一个目录,默认情况下显示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()
        }
    });

3 个答案:

答案 0 :(得分:2)

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

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

jsfiddle

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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

将表格包裹在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