javascript - jq固定高テキストの展開と折りたたみ

Question

リーリー

このような効果を実現するには、折りたたみ矢印と展開矢印が変わります。
書いてみましたが、ここに書かれている高さは固定されているものの、このテキストの量が不明であるため、効果は理想的とは言えません## ＃デモ＃＃＃

Answer 1

p の外側のレイヤーにレイヤーを直接ラップし、外側のオーバーフローを非表示にして、p の高さの設定を取得します。 次の例では、親要素のパディングを使用してオフセットします。 ;
リーリー

Answer 2

それは実際には非常に簡単です:
テキストの数に基づいて拡大または縮小したい場合は、length来设定判断条件,当长度小于的时候format一份html，这个html上面没有图标，当长度大于规定长度时，收缩时，对所有文字字符串进行截取然后拼接一个展开的图标，这个font-awesome多くのテキストがあり、それをページ上に表示し、同じルーチンを使用して拡大することができます。文字列をインターセプトする必要はなく、すべての文字列を縮小アイコンに結合し、以下に示した 2 つのアイコンにイベントをバインドするだけです。コードは完全ではありません。アイデアと実装を提供するだけで十分です。 リーリー

Answer 3

アニメーションについては、これを試してください:
デモ

数日前に @aunt の回答 (ここ) を読んでインスピレーションを得ました。
重要なポイントは、高さを固定せずに展開するには、まず高さを自動に設定し、次に getComputedStyle を使用して高さを取得し、次に高さを 0 に設定し、取得した高さを使用してアニメーション化することです。