javascript - 显示更多/更少的效果

Question

我找到了这段代码：链接

$(".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;
}

​</p>

这正是我想要的，但正如您在此处看到的，如果您修改它（链接），如果您只有一两行，“显示更多”链接就在那里，在这种情况下不需要它。谢谢您的回答！

Answer 1

由于您的示例代码没有完全工作，我决定增强我在前一段时间在一篇文章中创建的我自己的一个示例。

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

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

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

$(".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;
}

​</p>

Answer 2

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

首先，您必须衡量内容是否溢出。我已经使用了使用 jquery 检测元素溢出的解决方案。

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

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

Answer 3

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

为此，您必须检查带有文本的 div 是否大于您的阈值（2 行）。在我的解决方案中，我使用height()函数，它为您提供像素高度。在原始示例中，如果高度超过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()
    }