javascript阅读更多功能？答案

【问题标题】：javascript readmore function?javascript阅读更多功能？
【发布时间】：2015-08-04 16:30:27
【问题描述】：

这里是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/

【问题讨论】：

如果文本被截断，我会使用 PHP 生成“阅读更多”链接。
您可能感兴趣：jedfoster.com/Readmore.js
我很想听听一个 js 解决方案，因为我真的不想把他们从数据库生成的那些凌乱的文本变成一堆
已经看看 jedfoster 和 counter同样的问题，我真的没有足够的时间来分析它
cdnjs.com/libraries/select2
@TuanAnh 只有 JS 吗？还是 JS/JQ ？

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：

tks 解决方案现在我必须将其转化为我的案例的实际解决方案
经过一段时间的测试，我发现它在从 php 生成的普通文本上运行良好，但由于某种原因，使用 php foreach 生成的某些文本不起作用，也许我必须在 php 中寻找一些解决方案

【解决方案2】：

这是您要查找的内容：

$('.wrapper').each(function() {
    var content = $(this).find('.small');
    var expand = $(this).find('a[href="#"]');
    if (content.height() < 200) {
        expand.hide();
    } else {
        expand.click(function() {
            content.toggleClass('small big');
        });
    }
});

【讨论】：

【解决方案3】：

使用element.offsetHeight、element.offsetWidth、element.scrollHeight 和element.scrollWidth，您可以确定您的element 的内容是否大于其大小：

if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    // your element have overflow
} else {
    // your element doesn't have overflow
}

【讨论】：