javascript阅读更多功能？

Question

这是 html :

<div class="wrapper">
<div class="small">
    <p>Lorenter code hereem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div> <a href="#">Click to read more</a>

这是CSS:

.small {
    height: 20px;
    overflow:hidden;
}
.big {
    height: auto;
}

这是javascript:

$('.wrapper').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    $(this).text(this.expand?"Click to collapse":"Click to read more");
    $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});

问题是它总是显示展开的点击，尽管我的一些文本(从 php 生成的没关系)真的很短并且不需要 readmore 函数

所以请任何人提出一些高度条件，以便当文本低于特定高度时，他们不会显示点击以阅读更多信息

这是一个示例 FIDDLE: http://jsfiddle.net/mWcmg/302/

Answer 1

if ($('.small').height() < 300) {
  $('a').css({'visibility': 'hidden'});   
}

我刚刚将它添加到您脚本的底部。您可以检查小 div 的高度，如果它的高度低于某个阈值，则隐藏 'a' 标签