Question

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

当用户点击＆＃39;查看更多...＆＃39;在部分隐藏的div中超级，整个内容显示给用户和“无表情......”。显示超链接以使其恢复到初始状态。

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

Div＆＃39; shortcontent＆＃39;在UI上显示180个字符，并且＆＃39; allcontent＆＃39;是一个隐藏的div，它包含剩余的字符。＆＃39; morelink＆＃39;是一个超链接，用于制作隐藏的div＆＃39; allcontent＆＃39;对用户可见。

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的实际高度＆＃39; allcontent＆＃39;用户点击后查看更多内容。＆＃39;超链接。我尝试了下面的代码，但它的高度为364px而不是预期的1850px。

我认为在点击操作完成之前需要花费很多时间。

我如何等到所有内容＆＃39;在下面的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。

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

1 个答案: