显示更多/更少的效果

Question

我找到了这个代码：link

$(".show-more a").on("click", function() {
var $this = $(this); 
var $content = $this.parent().prev("div.content");
var linkText = $this.text().toUpperCase();    

if(linkText === "SHOW MORE"){
    linkText = "Show less";
    $content.switchClass("hideContent", "showContent", 400);
} else {
    linkText = "Show more";
    $content.switchClass("showContent", "hideContent", 400);
};

$this.text(linkText);
});​

CSS：

    div.text-container {
    margin: 0 auto;
    width: 75%;    
}

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
}

.showContent {
    line-height: 1em;
    height: auto;
}
.showContent{
    height: auto;
}

h1 {
    font-size: 24px;        
}
p {
    padding: 10px 0;
}
.show-more {
    padding: 10px 0;
    text-align: center;
}

​

这正是我要找的，但正如你在这里看到的，如果你修改它 (link)，如果你只有一两行，“显示更多”链接就会出现，而不是在这种情况下需要。 感谢您的回答！

Answer 1

由于您的示例代码没有完全正常工作，我决定增强我不久前在帖子中创建的own samples 之一。

DEMO - 显示更多/更少并在不需要时隐藏链接

演示显示第一个文本没有链接，第二个文本有链接。如果您在第一个文本中添加更多字符，您会在再次运行 fiddle 时看到该链接。

我们的想法是仔细检查客户端与实际高度，然后确定是否要显示链接。与下面类似。

$(".show-more a").each(function() {
    var $link = $(this);
    var $content = $link.parent().prev("div.text-content");

    console.log($link);

    var visibleHeight = $content[0].clientHeight;
    var actualHide = $content[0].scrollHeight - 1; // -1 is needed in this example or you get a 1-line offset.

    console.log(actualHide);
    console.log(visibleHeight);

    if (actualHide > visibleHeight) {
        $link.show();
    } else {
        $link.hide();
    }
});

演示使用以下 HTML：

<div class="text-container">
    <h1>Lorem ipsum dolor</h1>
    <div class="text-content short-text">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
        labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div>
    </div>
<div class="text-container">
    <h1>Lorem ipsum dolor</h1>
    <div class="text-content short-text">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div>
</div>​

以及以下基本 CSS：

div.text-container {
    margin: 0 auto;
    width: 75%;    
}

.text-content{
    line-height: 1em;
}

.short-text {
    overflow: hidden;
    height: 2em;
}

.full-text{
    height: auto;
}

h1 {
    font-size: 24px;        
}

.show-more {
    padding: 10px 0;
    text-align: center;
}

​

Answer 2

在这里查看工作小提琴 - http://jsfiddle.net/tariqulazam/hpeyH/

首先，您必须衡量内容是否溢出。我使用了detect elements overflow using jquery的解决方案。

最后使用这个插件来决定是显示还是隐藏“显示更多”链接。

$("div.content").HasScrollBar() ==true ? $(".show-more").show():$(".show-more").hide();

Answer 3

我不知道你真正的问题是什么，但我想你想停用显示更多链接，如果文本只有 1 或 2 行，如果文本超过 2 行，则激活它。

为此，您必须检查带有文本的 div 是否大于您的阈值（2 行）。在我的解决方案中，我使用 height() 函数为您提供 pixel 的高度。在原始示例中，如果高度大于 2em，则链接文本不可见。 您最好也使用像素或使用工具来转换单位。

以下是我为阈值为 1 行的解决方案添加的行：

var text = $('.text-container');
if (text.height() <= 20) {
    $('.show-more').hide();
}

http://jsfiddle.net/JRDzf/

Answer 4

    if( $('.text-container').html().indexOf("<br") >= 0 ) {
        $(".show-more").hide()
    }