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 - 显示更多/更少，并在不需要时隐藏链接

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

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

$(".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（）函数，该函数为您提供像素的高度。在原始示例中，如果高度超过 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()
    }

显示更多/更少的效果

4 个答案:

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