我编写了一个小脚本,可以通过单击展开和折叠(查看更多/更少)。我的问题是我有“点击我”按钮,当我点击它时,div 是动态创建的。但是当 div 添加到 DOM 时,容器不会自动扩展,因为给定了高度。将高度设置为单击时自动将解决此问题,但还有其他可能的方法来解决此问题。
JSFiddle - http://jsfiddle.net/7ntQR/
代码
(function($) {
$.fn.truncateText = function() {
this.each(function() {
var el = $(this);
var height = el.height(); //get the current height
el.data("dht",height); //use jquery data store to store the original height
el.css({ //set the height to some pixel...
'height':'40px'
});
var btnState = 'collapse';
var ix = $('<div>', {
'class':'seeMore'
}).appendTo($(el.parent()));
var sm = $('<span>').html('more')
.appendTo(ix)
.on('click' , function() {
if(btnState == 'collapse') {
btnState = 'expand';
el.animate({
'height':'40px'
},500);
}else {
btnState = 'collapse';
el.animate({
'height':el.data("dht")
},500);
}
});
btnState = 'expand';
function expand(elm) {
elm.html('SEE LESS');
}
function collapse(elm) {
elm.html('more');
}
});
};
})(jQuery);
最初使用 data() 存储 div 的原始高度,然后将 div 的高度更改为 40px。