javascript - jq固定高テキストの展開と折りたたみ
伊谢尔伦
伊谢尔伦 2017-06-29 10:09:11
0
3
1176

リーリー

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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全員に返信(3)
ringa_lee

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

いいねを押す +0
巴扎黑

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

いいねを押す +0
女神的闺蜜爱上我

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

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!