Question

通常在网站中，例如食谱，人们会看到大量文本（例如食谱方法），其中并非所有文本都显示为“更多...”超链接，人们可以点击这些超链接来显示所有内容

我正在尝试做类似的事情，但正如我所说的那样，我在相关的div元素上应用了height属性，从而减少了文本的数量。

topicGenerator.InnerHtml += "<div class='productList summaryContainer'>";
topicGenerator.InnerHtml += "<div class='productListTumbnail'>";
topicGenerator.InnerHtml += "<img src ='Images/ScreenShots/" + productCode + ".jpg' alt='Health and Safety'>";
topicGenerator.InnerHtml += "</div>";
topicGenerator.InnerHtml += "<div class='productListContent'>";
topicGenerator.InnerHtml += "<h3>" + productName + "</h3>";
topicGenerator.InnerHtml += summary;
topicGenerator.InnerHtml += "</div>";
topicGenerator.InnerHtml += "</div>";

.summaryContainer
{
height:120px;
overflow:hidden;
}

这远非理想。我可以在点击相关超链接（例如更多......）或者只是减少一定数量的文本（html）然后在点击时重定向到另一个页面的好方法时帮助扩展摘要文本数量。相关超链接。

Answer 1

为什么不使用Substring Method：

summary.Substring(0, 200) //Prints 200 first chars.

Answer 2

为什么不使用jQuery？

就像那样简单：

$('#more').click(function() {
    $('#content').toggle();
});

<a id="more">more</a>
<div id="content" style="display:none;">lot of text</div>

请参阅：http://api.jquery.com/toggle/

Answer 3

您可以使用jQuery实现一个简单的隐藏块。

<p>Here is the start of my text. Some more text will follow after you click the "More" link.</p>
<span id="moreLink"><a href="javascript:;" onClick="$('#moreLink').hide(); $('#moreStuff').show();">More...</a></span>
<div id="moreStuff" style="display: none;">
    <p>Here is the body of the text. Some more text here. This stuff is initially hidden. You can put more text in here, etc.</p>
    <p>Another paragraph inside the body.</p>
</div>

jsFiddle demo

减少摘要中的文本量

3 个答案: