Javascript 显示更多/更少的效果

我发现这个代码：

CSS:

​

这正是我想要的，但是正如您在这里看到的，如果您修改它（），如果您只有一两行代码，“showmore”链接就在那里，在这种情况下不需要它。

---

谢谢你的回答

看看这里的小提琴-

首先，您必须测量内容是否溢出。我使用了来自的解决方案

最后，使用此插件决定是显示还是隐藏“显示更多”链接

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

---

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

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

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

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

var text=$（'.text容器'）；
如果（text.height（）由于您的示例代码没有完全正常工作，我决定增强我在不久前的一篇文章中创建的一个示例代码

-显示更多/更少，并在不需要时隐藏链接
演示显示第一个文本没有链接，第二个文本有链接。如果在第一个文本中再添加几个字符，则在再次运行小提琴时会看到链接

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

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

​
 
if（$（'.text container'）.html（）.indexOf("所以，你的问题是…？这不是关于你在这里找到和发布的代码，而是关于创建链接的代码，不是吗？如果是这样，告诉我们！@Bergi他有一把小提琴这里实际上没有任何逻辑来显示或隐藏内容。
showContent
和
hideContent
函数缺失。@sabithpocker:是的，我看到了-但我找不到任何与他的问题（或任何问题）相关的代码。否则，答案将是-现在没有“显示更多”链接少于一行！@MarkI：你可以检查文本所在div的
clientHeight
和
scrollHeight
，并相互比较，以确定是否需要显示链接。有关更多详细信息和工作演示，请参阅我的答案。或者你可以搜索
或检查

几乎不需要重新搜索有责任……你是在假设有。或者，有人甚至可能一开始就把这个代码放在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行时显示。我自己不知道这到底是为什么，但这可能与
scro时使用边框/边距/填充或通用框模型的方式有关llHeight
是计算出来的。所以将值从1更改为2应该可以解决这个问题，否则我可能误解了你，因为它在IE上仍然存在漏洞。@MarkI:是的，将
-1
更改为
-2
在IE 10上对我有效。当你说“不工作”时你是什么意思？因为更改提琴中扣除的数字将确保如果文本正好是两条可见线，则不会显示IE中的链接。如果你有一个在IE中不起作用的提琴，如果你愿意，我可以看一看。@MarkI:我只有IE10，即使进入IE9或IE8模式，它仍然起作用。链接只有两行数据时隐藏（使用-2），如果显示链接，则可以根据需要显示和隐藏文本。
$(".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();
    }
});

<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>​

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

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