0

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

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

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）然后在单击时重定向到不同页面的好方法相关超链接。

4

3 回答 3

3

为什么不使用子字符串方法：

summary.Substring(0, 200) //Prints 200 first chars.
于 2013-05-16T08:28:23.833 回答
1

为什么不使用 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/

于 2013-05-16T08:29:48.583 回答
1

您可以使用 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 演示

于 2013-05-16T08:32:37.163 回答