我有一个目录,默认情况下显示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()
}
});
答案 0 :(得分:2)
答案 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