我有一个固定的 div
高度,其中有些文本会溢出。我已将溢出设置为 hidden
并希望扩展 div height
以在按下链接时显示内部的其余文本;然后在再次按下链接时将 div
返回到其初始高度。我遇到了以下 question这就是我想要的,但是他们的文本被分成 2 个 p
标签,而我只有一个。我试过了,但出现以下错误:
无法获取未定义或 null 引用的属性“scrollHeight”
这是我的 code
如有任何帮助,我们将不胜感激。
最佳答案
问题是获取元素..
$(function() {
if ($('#dialog-box').is(':visible')) {
showMoreTextDialog();
}
function showMoreTextDialog() {
var dialog_txt = $('.dialog_middle p').html();
if (dialog_txt.length > 350) {
var append_dialog = dialog_txt.substr(0, 350);
$('.dialog_middle p')
.html(append_dialog)
.append('<span class="showMore"> (.... Show More )</span>');
$('.dialog_middle')
.data("original-height", $(".dialog_middle")[0].scrollHeight);
$(document).on({
'mouseover': function() {
$(this).css('cursor', 'pointer');
},
'click': function() {
$('.dialog_middle p')
.html(dialog_txt)
.append('<span class="showLess"> (.... Show Less )</span>');
$('.dialog_middle')
.animate({
height: $(".dialog_middle")[0].scrollHeight
}, 2000);
}
}, '.dialog_middle .showMore');
$(document).on({
'mouseover': function() {
$(this).css('cursor', 'pointer');
},
'click': function() {
$('.dialog_middle')
.animate({
height: $(".dialog_middle").data("original-height")
}, 2000, function() {
$('.dialog_middle p')
.html(append_dialog)
.append('<span class="showMore"> (.... Show More )</span>');
});
}
}, '.dialog_middle .showLess');
}
}
});
关于javascript - 在动态设置 div 高度动画时切换文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36211903/