Question

我需要通过css扩展一个溢出设置为隐藏的div。单击“展开”时，div的高度将扩展到显示整个文本所需的高度。为此，我使用以下代码：

$( ".expand" ).click(function() {
$('#mainDiv').animate({
height: $('#mainDiv').get(0).scrollHeight
}, 500, function(){
$(this).height('auto');
});
});

这可以像预期的那样使用这样的硬编码段落：

<p class="expand">Expand …</p>

现在，我想动态插入此段落，具体取决于div中的文本是否长于div是否适合div。如果它小于div设置的高度，则不需要此段落。所以我尝试通过添加一个函数来实现这一点，因为代码现在看起来像这样：

$(document).ready(function() {
var height = $('#mainDiv').prop('scrollHeight');
if(height>420){
$("<p class='expand'>Expand …</p>").insertAfter('#mainDiv');
}
});

$( ".aufklappen" ).click(function() {
$('#hauptTextInhaltReduziert').animate({
height: $('#hauptTextInhaltReduziert').get(0).scrollHeight
}, 500, function(){
$(this).height('auto');
});
});

插入段落就好了。但是：它不起作用，点击段落时没有任何反应。

非常感谢帮助。

Answer 1

您的代码不包含DOM更改。使用以下内容：

$( ".aufklappen" ).on("click", function() {
  ...
});

Answer 2

使用绑定到容器/正文的委托事件处理程序：
试试这个：

$('body').on('click', '.aufklappen', function(){
  $('#hauptTextInhaltReduziert').animate({
    height: $('#hauptTextInhaltReduziert').get(0).scrollHeight
   }, 500, function(){
   $(this).height('auto');
  });
});

也就是说，绑定到JS运行时存在的元素（页面加载时正文存在），并将第二个参数中的选择器提供给.on（）。当body元素上发生单击时，jQuery会检查它是否应用于与该选择器.aufklappen匹配的该元素的子元素。

将div扩展为滚动高度

2 个答案: