javascript 显示更多/更少的效果

Show more/less with effect

提问by Mark

I found this code: 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:

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;
}

?

?

It was exactly what I was looking for, but as you can see here, if you modify it (link), the "Show more" link is there if you have only one or two lines, and it is not needed in that case. Thank you for your answers!

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

回答by Nope

As your sample code was not fully working I decided to enhance one of my own samplesI created in a post a while ago.

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

DEMO- Show more/less and hide the link when not needed

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

The demo shows the first text to have no link and the second to have a link. If you add a few more characters to the first text you see the link appear when you run the fiddle again.

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

The idea is to double check the client vs the actual height and determine then if you want to show the link. Similar to the below.

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

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

The demo is using the following HTML:

该演示使用以下 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>?

and the following basic CSS:

以及以下基本 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;
}

?

?

回答by Tariqulazam

See the working fiddle here - http://jsfiddle.net/tariqulazam/hpeyH/

请参阅此处的工作小提琴 - http://jsfiddle.net/tariqulazam/hpeyH/

First you have to measure if the content has overflowed or not. I have used the solution from detect elements overflow using jquery.

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

Finally use this plugin to decide whether to show or hide the 'show more' link.

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

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

回答by timaschew

I don't know whats your real question is, but I suppose you want to deactive the show more link, if the text is only 1 or 2 lines and active it if the text has more than 2 lines.

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

For this purpose you have to check if the div with the text is bigger than you threshold (2 lines). In my solution I use the height()function which give you the height in pixel. In the original example the link text is not visible if the height is more than 2em. You better should use also pixel for that or use a tool to convert the units.

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

Here are my addition lines for a solution with a threshold of 1 line:

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

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

http://jsfiddle.net/JRDzf/

http://jsfiddle.net/JRDzf/

回答by JP_

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