Question

使用API来吐出p标签中的内容......但它太长了。考虑在达到400个字符的限制时隐藏它们，但这不是一个好主意，因为它有可能切断HTML标记。

所以我试图在3段之后隐藏其余内容，并使用文本“Read More”取消隐藏其余内容。如何实现这一目标？

Answer 1

<div><p></p><p></p><p></p><p></p><p></p>
    <a href="#readMore" class="readMore">Read More</a>
</div>

如果你有这种结构，你可以

$('div p:nth-child(3)').nextAll('p').hide();

和

$('a.readMore').click(function(){
    $(this).siblings('p').show();
    return false;
})

资源： - .nextAll()

Answer 2

您可以使用:gt() selector，然后使用.hide()或.remove()：

var $content = $("#content");
$content.find("p:gt(2)").hide();

或者您可以使用.children()和.slice(3)隐藏所有子元素超出第三个元素：

$content.children().slice(3).hide();

如果您存储隐藏的元素，您甚至可以非常轻松地创建更多阅读按钮：

var $content = $("#content");
var $hiddenText = $content.children().slice(3).hide();
if ($hiddenText.length) {       
    var $button = $("<a href='#'>Read More...</a>").click(function() {
        $hiddenText.show();
        $button.remove();
        return false;
    }).appendTo($content);
}

View jsFiddle demo

Answer 3

这只是一种向后的方法，但做的是这样的。

<style>
#con p{
  display:none;
}
</style>

<div id='con'>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

然后让jquery选择前三个p标签并将显示设置为阻止。

此外，您可以使用

<style>
#con{
  overflow:auto;
  max-height:300px;
}
</style>

你不必担心任何问题。

隐藏3段<p> </p>后的内容

3 个答案: