0

我正在为文本编写一些阅读更多/更少的功能，但我遇到了下一个问题。

我的步骤： 1）获取包含 div 的文本的内容，其中包含多个段落。

    var content =  $heroContent.html();

2）我制作了始终显示的部分的子字符串，以及全文的第二个子字符串 - 始终显示的部分，实际上是隐藏的部分。（该隐藏部分可以通过单击按钮显示或隐藏）

c = content.substr(0, 700)
h = content.substr(700, content.length - roundedLimit)

3）我将第二部分放在一个包含更多内容的跨度中，这样我就可以隐藏该内容并显示它。

html = c + "<span class='morecontent'>" + h + "</span>";

4）我再次将上面的 html 变量添加到带有文本的 div 中，并隐藏“更多内容”。

将文本放在一个跨度中的原因是它可以在它分解之前与文本内联放置。如果不在 span 中，则文本仅出现在下面的行中，这是不想要的。

问题：第二个子字符串h可以由多个段落组成。因此，当 P 标签在变量h内关闭时，span 标签也会自动关闭，因此，morecontent类仅适用于 span 的开头直到内部第一段的结尾。

我试图通过将文本放入 DIV 来修复它，但是文本没有出现内联，这确实是一个重要的“功能”。

如果有人能给我解决这个问题，那就太好了！

4

2 回答 2

1

这是一个将内容包装在容器中的解决方案，并使用更多/更少按钮来扩展/收缩容器以显示内容：

var content = $('.content').wrapInner('<div class="moreless less">');

$('.moreless').after('<div class="showbutton"><span>More</span><span class="hidden">Less</span></div>');

$('.content').on('click', '.showbutton', function() {
   $(this).prev('.moreless').toggleClass('less');
   $(this).find('span').toggleClass('hidden');
});

CSS：

.content {
    line-height: 20px;
}

.less {
    max-height: 100px;
    overflow: hidden;
}

.hidden {
     display: none;   
}

http://jsfiddle.net/rrvtw/

您需要进行一些检查以确保more在内容小于容器时不会添加按钮。

于 2013-03-28T16:42:29.587 回答
0

另一种快速的方法可能是保留一个短版本和长版本，而不是第一部分和第二部分，然后单击一个按钮，只需在两者之间切换：

var content =  $heroContent.html();
c = content.substr(0, 700)

html = "<div class='short'>" + c + "</div>" + 
       "<div class='all'>" + content + "</div>";

mybutton.toggle() -> $('.short').hide();
                     $('.all').show(); // and viceversa on second click.

听起来怎么样？

于 2013-03-29T10:31:35.890 回答