Question

通过AJAX调用检索了一些文本，需要将其插入到DOM中：

$("#someInsertionPoint").append(someHtml);

someHtml可能很小，以便为#someInsertionPoint创建50px的结果高度。然后，可能会有这么多文本，以便#someInsertionPoint最终高度为300px或更高，以便包含所有文本。

在someHtml很长的情况下，规范要求显示文本的截断版本（带有尾部省略号），然后是“更多...”链接，单击该链接会增加#someInsertionPoint，以动画方式，以便容纳全文。

一切似乎都是直截了当的，只有一个例外：如何确定插入完整文本时#someInsertionPoint的高度？回想一下，此值将用作用户单击“更多...”链接时发生的动画高度更改的终点。 StackOverflow.com上的一些帖子表明无法预先计算高度;只有在插入文本完成后才能检索。这让我相信我的方法应该如下：

（1）将someInsertionPoint的可见性设置为“hidden”。

（2）插入全文并将someInsertionPoint的高度缓存在变量中。

（3）截断插入的文本并添加省略号。将#someInsertionPoint的高度设置为50px。

（4）使someInsertionPoint可见，以显示50px高度的截断文本。

（5）当点击“more ...”链接时，截断的文本可以用全文替换，我可以使用我在＃2中缓存的高度将高度设置为理想大小。

有更好的方法吗？

感谢。

Answer 1

我认为你创造了一个问题，因为它通常没问题。这是一个设计缺陷。只是不要使用固定的高度。如果你想自动调整大小，请使用最小高度并让内容进行大小调整。这是简单的方法。否则，当您想要使用固定高度时，您可以使用两个div（一个具有固定高度）并在插入后测量'ajax'高度（计算高度时必须可见）。

例如：

<div id="fixed" style="height:200px;overflow:hidden">
 <div id="loader">
</div>

$('#loader').html('your content');
alert($('#loader').outerHeight());

当您尝试此示例时，加载网络内容时#fixed div不会调整大小。插入后，您可以测量高度并根据需要调整父div #fixed。

希望有所帮助

JQuery：预先计算插入项的高度

1 个答案: