0

レシピなどの Web サイトでは、多くの場合、大量のテキスト (たとえば、レシピ メソッド) が表示されますが、すべてのテキストが「詳細...」ハイパーリンクで表示されているわけではなく、クリックするとすべてを表示できます。

私は似たようなことをしようとしていますが、現時点では、関連する 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 に答える