展开/收起并具有效果

Question

展开/收起并具有效果

4

我找到了这段代码：

我发现了这个链接：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)，如果只有一两行，则会出现“显示更多”链接，此时不需要它。谢谢您的回答！

- Mark

那么，你的问题是什么呢？不是关于你找到并发布在这里的代码，而是关于创建链接的代码，是吗？如果是的话，那就给我们看看吧！ - Bergi

@Bergi 他有一个fiddle http://jsfiddle.net/Wpn94/2/ - sabithpocker

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

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

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

4个回答

1

在这里查看工作的fiddle - http://jsfiddle.net/tariqulazam/hpeyH/

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

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

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

- Tariqulazam

1

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

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

这里是我添加的解决方案阈值为1行的代码：

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

http://jsfiddle.net/JRDzf/

- timaschew

或者您可以搜索 <br/> 或 <p>。 - JP_

1

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

- JP_

1

检查<br>并不可靠...因为你假定存在。或者，有人甚至可能将其放置在开头。 - charlietfl

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nope · Accepted Answer

由于您提供的示例代码并未完全工作，因此我决定改进我之前在博客文章中创建的自己的示例之一。

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

演示显示第一个文本没有链接，第二个文本有链接。如果您在第一个文本中添加更多字符，则再次运行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;
}