我一直在研究我的页面功能,易用性是我一直瞄准的一件事。为了改善我的布局,我决定创建可折叠的部分。但是,我有两个问题。 1)我可以设置DIV扩展,但不能再缩小。所以我决定创建一些东西,告诉它是否大于最小尺寸,扩展内容,但现在它也不会扩展。这是我的代码:
$(".contentBox").click(function(){
var boxHeight = $(this).height();
var minBoxHeight = 40;
if (boxHeight < minBoxHeight)(function() {
$(this).css({
height: 'auto',
transition: 'height 800ms, background 800ms, box-shadow 800ms'
});
)};
});
2)因为我正在使用自动高度,这是一种做事方式,所以当它扩展和折叠时,我正在牺牲我的滑动动画。但是,如果有人知道一种方法来保持高度变化到内容大小,以及保持我希望的动画将是辉煌的。
答案 0 :(得分:5)
你写了一个错字:
$(".contentBox").click(function(){
var boxHeight = $(this).height();
var minBoxHeight = 40;
if (boxHeight <= minBoxHeight) {
$(this).css('height', 'auto');
var tmp_height = $(this).height();
$(this).css('height', boxHeight+'px');
$(this).css({
height : tmp_height+'px',
transition: 'height 800ms, background 800ms, box-shadow 800ms'
});
} else {
$(this).css({
height: '40px',
transition: 'height 800ms, background 800ms, box-shadow 800ms'
});
}
});
那会让它扩大和崩溃
我相信这会做所有的伎俩。 您可以使用内容将div的高度计算为变量。 将其重置为原始位置。然后进行过渡。
这是一个jsfiddle。我无法让它与转换一起工作,但让它与animate合作: