显示更多/更少的效果

Posted 2023-03-31

【中文标题】显示更多/更少的效果

【英文标题】：Show more/less with effect

【发布时间】：2012-11-13 09:19:15

【问题描述】：

我找到了这个代码：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)，如果你只有一两行，“显示更多”链接就会出现，而不是在这种情况下需要。 感谢您的回答！

【问题讨论】：

那么，你的问题是......？这与您在此处找到并发布的代码无关，而是与创建链接的代码有关，不是吗？如果是这样，请告诉我们！

@Bergi 他有一把小提琴jsfiddle.net/Wpn94/2

这里实际上没有任何逻辑可以显示或隐藏内容。缺少 showContent 和 hideContent 函数。

@sabithpocker：是的，我看到了——但我找不到任何与他的问题（或任何问题）相关的代码。否则，答案将是 jsfiddle.net/Wpn94/3 - 现在没有少于一行的“显示更多”链接！

@MarkI：您可以检查文本所在 div 的 clientHeight 和 scrollHeight 并将它们相互比较以确定是否需要显示链接。有关更多详细信息和工作演示，请参阅我的答案。

【参考方案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;

​

【讨论】：

这段代码在 Chrome 上运行良好，但在 IE 上不运行，知道为什么吗？

@Markl：出于某种原因，在 Chrom 中，我不得不像这样从scrollHeight 中扣除 1：var actualHide = $content[0].scrollHeight - 1; 似乎在 IE 10 中它需要扣除 2，然后它也可以在那里工作，像这样：var actualHide = $content[0].scrollHeight - 2; 如果没有扣除，问题是scrollHeight 在 chrome 中关闭 1，在 IE 中关闭 2，这会导致链接在您只有 2 行时显示。我自己也不知道为什么会这样，但它可能与计算 scrollHeight 时使用的边框/边距/填充或一般盒子模型的方式有关。

所以将值从 1 更改为 2 应该可以解决这个问题，或者我可能误解了你，因为它仍然存在于 IE 上。

@MarkI：是的，在 IE 10 上将 -1 更改为 -2 对我有用。当您说“不工作”时，您是什么意思？因为更改小提琴中的扣除数字将确保如果文本恰好是 2 条可见行，则不显示 IE 中的链接。如果你有一个不能在 IE 中工作的小提琴，如果你愿意，我可以看看。

@MarkI：我只有 IE10，即使进入 IE9 或 IE8 模式，它仍然可以工作。当只有 2 行数据时，链接会被隐藏（使用 -2），如果显示链接，则可以根据需要显示和隐藏文本。

【参考方案2】：

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

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

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

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

【参考方案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/

【讨论】：

或者您可以搜索 或

【参考方案4】：

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

【讨论】：

检查<br> 几乎不可靠......你假设有任何。或者，有人甚至可能在一开始就放置了