Question

我需要一种方法来强制使用jquery“读取更多”类型的效果。

我怀疑这样做会很困难但是我们走了。

采取这一段：

Lorem ipsum dolor坐下来，精神上的精神。 Pellentesque interdum nisi ut sapien tincidunt pretium。 Maecenas vel mi eu dui feugiat hendrerit。在hac habitasse platea dictumst。 Aliquam turpis velit，facilisis non euismod id，convallis vitae orci。 Etiam rhoncus ante et risus sagittis euismod。

我想要这个：

Lorem ipsum dolor坐下来，精神上的精神。 Pellentesque interdum nisi ut sapien tincidunt pretium。 点击此处阅读更多

<div class="hidden"> Maecenas vel mi eu dui feugiat hendrerit。在hac habitasse platea dictumst。 Aliquam turpis velit，facilisis non euismod id，convallis vitae orci。 Etiam rhoncus ante et risus sagittis euismod。 </div>

当读取“单击此处”时，div“隐藏”将滑入以查看。

不幸的是我无法控制这一段的输出，因此无论如何都会输出整个段落。我需要尝试使用JQUERY或类似的方法来选择大约20个字符，然后附加一个锚点和<div>来隐藏文本的其余部分。

它可能太复杂但我想不出另一种方式。

我再说一遍 - 我无法改变段落的输出方式，但想尝试一种“阅读更多”的方法。

感谢。

Answer 1

尝试这样的事情（demo）：

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum nisi ut sapien tincidunt pretium. Maecenas vel mi eu dui feugiat hendrerit. In hac habitasse platea dictumst. Aliquam turpis velit, facilisis non euismod id, convallis vitae orci. Etiam rhoncus ante et risus sagittis euismod.</p>

脚本

$('p').each(function(){
    var $this = $(this);
    $this
        // save the height of the paragraph
        .data('height', $this.height() )
        // Show only the top line of the paragraph
        .css({
            overflow: 'hidden',
            height  : $this.css('lineHeight')
        })
        // add a clickable message
        .after('<div class="more">Click to read More</div>');

        $this.next().click(function(){
            // When clicked, restore the original height of the paragraph
            $this.animate({ height: $this.data('height')}, 500);
            // Hide the clickable link
            $(this).hide();
    });
});

Answer 2

这是我想出的一件小事。

<script language='javascript' type='text/javascript'>

$(document).ready(function() {
    $("#clicker").click(function() {
        var str = $("#test").html();
        var words = str.split(' ');
        var base = "";

        for (var i=0;i<20;i++) {
            base += words[i] + " ";
        }

        $("#test").html(base + "<a href='#'>Click here to read more</a>");
    });
});
</script>

<div id='test'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum nisi ut sapien tincidunt pretium. Maecenas vel mi eu dui feugiat hendrerit. In hac habitasse platea dictumst. Aliquam turpis velit, facilisis non euismod id, convallis vitae orci. Etiam rhoncus ante et risus sagittis euismod.
</div>
<a href='#' id='clicker'>Here</a>

Answer 3

不要费心去做，只需使用ThreeDots：http://tpgblog.com/threedots/

jquery - 在段落中找到第N个单词，添加一个锚点，然后隐藏剩余的文本

3 个答案: