0

ここにいる誰かが私を少し助けてくれるほど親切ではないかと思っていました. クライアントのウェブサイト用に展開可能な段落を作成したいと考えています。彼らは、かなり大規模なサイトからすべてのコンテンツを保持したいと考えており、デザインを全面的に見直したいと考えています。彼らは主にSEOの目的でそれを維持したいと思っています. とにかく、特定のテキスト行の後に「続きを読む...」リンクを使用して、展開可能な段落を使用する方法があれば、両方の使用に役立つと思いました。これにはいくつかの JQuery および Java ソリューションがあることは知っていますが、可能であれば、これらのオプションを避けたいと考えています。できればHTMLとCSSをお願いします。

以下に例を示します。

ここに見出し

たくさんのテキストを含む段落。これをあらかじめ決められた行に表示したいと思います。たとえば、段落の開始が、たとえば 3 行続き、[続きを読む...] があるとします。

訪問者が「続きを読む」をクリックすると、記事全体が表示されるように残りのコンテンツが展開されます。コンテンツが既にページにあるようにしたいので、単に拡張します。それが理にかなっていれば、別のファイルなどから呼び出されたくありません。事前にすべての助けに感謝します。それは大歓迎です!

テストード

4

3 に答える 3

2

簡単な解決策はこれです

と を使用して、css で 2 つのトグル イベントが必要になりますdisplay: none;。display: block;

http://jsfiddle.net/6W7XD/1/

of course you would need to pre-program where you want to start the hide by including a div of it with the close button span inside the div to do the toggles

そして、もしあなたがJavaScriptを使うことに決めたなら、ここにあなたが見ることができるものがあります

http://jedfoster.com/Readmore.js/

于 2014-08-25T16:15:53.737 に答える
1

JqueryまたはJavascriptを使用する必要があると思います

$('a').click(function() {
    var p = $('a').prev('p')
    var lineheight = parseInt(p.css('line-height'))
    if (parseInt(p.css('height')) == lineheight*2) {
       p.css('height','auto');
       $(this).text('Less')
    } else {
       p.css('height',lineheight*2+'px');
       $(this).text('More')
    }
});

デモ

于 2014-08-25T16:16:21.267 に答える