获取动态创建的隐藏元素的实际长度

Question

我有一个部分隐藏的div元素，它只显示180个字符并隐藏div的其余内容。

当用户点击部分隐藏的div中的“viewmore ..”hyper时，整个内容会显示给用户，并显示“无显示...”超链接以使其恢复到初始状态。

下面是html.Hide的最终结构，show是使用java脚本控制的。

Div'shutcontent'在UI上显示180个字符，'allcontent'是隐藏的div，用于保存剩余的字符。 'morelink'是一个超链接，用于使隐藏的div'allcontent'对用户可见。

var html = '<div class="shortcontent" id="shortcontent">' + c +
                '</div><div class="allcontent" id="allcontent">' + content +
                             //view more hyperlink
                '</div><span><a href="javascript:void(0);" class="morelink">' + config.moreText + '</a></span>';

            $this.html(html);
            $this.find(".allcontent").hide(); // Hide all text
            $('.shortcontent p:last', $this).css('margin-bottom', 0); 

我想在用户点击“查看更多...”超链接后得到隐藏div'allcontent'的实际高度。我尝试了下面的代码，但它给出了高度为364px而不是1850px这是预期的。

我相信在点击操作完成之前，高度需要很多。

我如何等待'allcontent'容器完全展开，然后在下面的onclick事件中获取宽度？

$(document).on( 'click', 'a', function () {            
         var explore = $('.allcontent').outerHeight( true );
         //How to wait until click operation is fully done here?????
});

我创造了一个小提琴，以便专家可以想象我的问题陈述

https://jsfiddle.net/sonashetty/nca7grfp/3/

Answer 1

这直接来自this link，它似乎是一个很好的解决方法：

var element = $('selector');
var saved = element.css(['top', 'overflow', 'height']);
element.css({
  top : 0,
  height : 0,
  overflow : 'scroll'
});
var actualHeight = element.prop('scrollHeight');
element.css('top', saved);

如您所见，actualHeight将包含实际高度，然后将元素返回到其原始CSS。