1

さて、私はこれに対する正しいアプローチを見つけようと一日中費やしてきましたが、不足しているので、ここの誰かが私を正しい方向に向けることができます.

問題: クラス "article-content" を持つ div があります。ページにはこれらの約 2 ～ 10 があります。それぞれに wysiwyg からの出力が含まれます。つまり、テキストは p タグ、いくつかの強力なタグ、em タグ、さらには img タグで囲まれています。

画像を表示せず、x 文字の末尾に [...] と「続きを読む」リンクを追加するこれらのプレビュー/抜粋バージョンを作成する必要があります。これをクリックすると、記事全体が画像を含めて表示されます。

私は次のアプローチを見てきました：

  1. x 文字の後に div のコンテンツを削除し、[...] + リンクを追加します。これにより、終了タグが取り除かれ、画像タグの途中まで取り除かれ、壊れた html が outputtet になる可能性があるため、コンテンツが少し壊れやすくなります。

  2. コンテンツ要素の高さを変更し、overflow:hidden;. これにより、画像がボックスからはみ出し、一部が内側に表示されたり、行の高さとコンテンツの高さに応じて行が半分にカットされたりする可能性があります。これにより、js は非常に CSS に依存します。

  3. 最初の x 文字で新しいコンテンツ要素を作成し、短いバージョンと長いバージョンで表示なし/ブロックを切り替えます。これにより、マークアップにテキストの 2 つのインスタンスが作成されます。これにより、要素が展開されたときに高さの css トランジションを利用することもできなくなります。

このおそらく単純であり、よく使用されるタスクのための防弾プラグインを見つけることができなかったのは少し奇妙です。しかし、何かが足りないだけかもしれません。間違った用語をグーグルで検索しているかもしれません。これは正式には何と呼ばれていますか？トグル展開？もっと読む-もっと読まない? もっと見せる？

最善のアプローチと考えられるものは何ですか? これらすべての問題を回避する方法はありますか？

お時間をいただきありがとうございます

4

1 に答える 1

4

私が思う最善のアプローチは、すべてクライアント側で行いたい場合は、テキストをラッパー div でラップすることです。

<div class="article">
  <div class="text short">
      Long Text
  </div>
  <span class="read-more">read more</span>

これ.text.shortは固定の高さに設定されます。たとえばheight:100px;
、read-more短いクラスを削除して完全なクラスを追加するクリック イベントで設定されます。

Js は次のようになります。 

    $(document).ready(function(){ 

        $(".read-more").click(function(){

            var $elem = $(this).parent().find(".text");
            if($elem.hasClass("short"))
            {
                $elem.removeClass("short").addClass("full");

            }
            そうしないと
            {
                $elem.removeClass("full").addClass("short"); 

            }

        });
    });

次のようなcss：

.article {
   border-bottom: 1px dotted grey;
   padding: 3px;
   margin: 2px;
}
.article .text {
   font-size: 12px;
   line-height: 17px;
   font-family: arial;
}
.article .text.short {
   height: 100px;
   overflow: hidden;
}
.article .text.full {

}
.read-more {
   cursor: pointer;
   display: inline-block;    
   font-weight: bold;
   padding: 3px;
   background-color: #06c;
   color: white;
   margin: 2px;
}

JavaScriptコードを使用すると、文字、画像を好きなものに置き換えることができます。

私はあなたのために完全に機能する例を作成し、jsFiddleで見栄えがします


jqueryで省略記号を追加して編集します。

jsFiddleで参照

于 2013-10-04T11:45:09.367 に答える