Question

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

我的步骤： 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中，并使'morecontent'隐藏。

将文本放入范围的原因是它可以在文本分解之前与文本内联。如果不是跨度，则文本只显示在下面的行中，这是不需要的。

问题：第二个子字符串 h ，可以包含多个段落。因此，当变量 h 中的P标记关闭时，span标记也会自动关闭，因此，类 morecontent 仅应用于跨度的开始直到第一个结束里面的段落。

我尝试将文本放在DIV中来修复它，但是文本没有内联，这真的是一个重要的“功能”。

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

Answer 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按钮。

Answer 2

另一种快速方法可能是保留短版和长版，而不是第一版和第二版，只需单击按钮即可在两者之间进行交换：

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.

听起来怎么样？

在span，jquery中动态分割p

2 个答案: