0

テキストの read-more/less 機能を書いていますが、次の問題に遭遇しました。

私の手順: 1) 複数の段落を持つ div を含むテキストのコンテンツを取得します。

    var content =  $heroContent.html();

2) 常に表示される部分の部分文字列と、全文の 2 番目の部分文字列 (常に表示される部分、つまり実際には非表示の部分) を作成します。（その隠れた部分はボタンをクリックすることで表示・非表示が可能です）

c = content.substr(0, 700)
h = content.substr(700, content.length - roundedLimit)

3) 2 番目の部分を morecontent クラスのスパン内に配置して、そのコンテンツを非表示にして表示できるようにします。

html = c + "<span class='morecontent'>" + h + "</span>";

4) 上記の html 変数をテキスト付きの div に再度追加し、「morecontent」を非表示にします。

テキストをスパンに配置する理由は、テキストが分割される前にインラインで配置できるためです。スパンにない場合、テキストは下の行に表示されるだけであり、これは望ましくありません。

問題: 2 番目の部分文字列hは、複数の段落で構成される場合があります。そのため、P タグが変数h内で閉じると、span タグも自動的に閉じます。したがって、クラスmorecontentは最初の段落の終わりまでスパンの開始にのみ適用されます。

テキストをDIVに入れて修正しようとしましたが、テキストがインラインで表示されません。これは本当に重要な「機能」です。

誰かがこの問題の修正を私に与えることができれば、それは素晴らしいことです!

4

2 に答える 2

1

以下は、コンテンツをコンテナにラップし、more/less ボタンを使用してコンテナを展開/縮小してコンテンツを表示するソリューションです。

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コンテンツがコンテナーより小さい場合にボタンを追加しないように、いくつかのチェックを入れる必要があります。

于 2013-03-28T16:42:29.587 に答える
0

もう 1 つの簡単な方法は、最初の部分と 2 番目の部分ではなく、短いバージョンと長いバージョンを保持し、ボタンをクリックするだけで 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.

それはどのように聞こえますか？

于 2013-03-29T10:31:35.890 に答える