JavaScript はテキストの展開と折りたたみを実装します
May 17, 2023 pm 06:17 PMJavaScript は、テキストの段落の展開および折りたたみ機能を実装します。
Web デザインではユーザー エクスペリエンスがますます重視されるようになり、テキストの段落を展開または折りたたむ必要があるページ デザインがますます増えます。場合によっては、JavaScript コードを使用してこの機能を実現できます。 JavaScript を使用してテキストを展開したり折りたたんだりする方法を見てみましょう。
- HTML コード
まず、HTML コードを準備する必要があります。このコードには、展開したり折りたたんだりする必要があるテキストと、残りの部分を含めることができます。ページ要素。サンプル コードは次のとおりです。
<div class="content"> <p>这是一段需要展开收起的文字,可以有很多很多的字,可能会占据很多的空间。因此,在默认情况下,我们只会显示部分文字,而把其余的部分折叠起来。如果需要查看全部内容,可以点击“查看更多”按钮,文字内容就会展开显示了。</p> <button class="btn-more">查看更多</button> </div>
このコードでは、<div>
タグを使用して、展開および折りたたむ必要があるテキスト要素とボタン要素をラップします。 <div>
タグでは、<p>
タグを使用して、展開および折りたたむ必要があるテキスト コンテンツを表示します。テキスト コンテンツの下に、## を使用します。 #< ;button>タグを使用すると「続きを見る」ボタンが表示されます。
- CSS スタイル
.content p { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* 设置文字溢出时显示省略号 */ } .content p.is-expanded { overflow: visible; white-space: normal; /* 文字溢出时不再显示省略号 */ } .btn-more { display: block; margin-top: 10px; cursor: pointer; /* 设置鼠标指针为手型 */ }
- JavaScript コード
let isExpanded = false;
<p> メソッドを使用して、展開する必要があるテキストに対応する 変数のステータスを使用して、現在のテキストが展開されているか折りたたまれているかを判断します。展開状態の場合は、クラス 以上がJavaScript はテキストの展開と折りたたみを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。 要素を取得する必要があります。この要素 ##is-expanded
のクラス。同時に、ボタンのテキストの内容を変更して「Less」または「View More」を表示し、現在のテキストのステータスをユーザーに思い出させます。 const content = document.querySelector('.content');
const btnMore = document.querySelector('.btn-more');
btnMore.addEventListener('click', function() {
const paragraph = content.querySelector('p');
isExpanded = !isExpanded;
if (isExpanded) {
paragraph.classList.add('is-expanded');
btnMore.innerText = '收起';
} else {
paragraph.classList.remove('is-expanded');
btnMore.innerText = '查看更多';
}
});
<p>
要素を取得します。 「View More」ボタンに対応する <button>
要素。次に、ボタン要素にクリック イベント リスナーを追加します。これは、ユーザーがボタンをクリックしたときに起動されます。 イベント リスナーでは、
is-expanded
を <p>
要素に追加し、ボタンのテキストを「Collapse」に設定します。代わりに、is-expanded
クラスを削除し、ボタンのテキストを「もっと見る」に設定します。 これまでのところ、テキストの段落の展開および折りたたみ機能を正常に実装できました。ユーザーが「もっと見る」ボタンをクリックすると、展開または折りたたむ必要があるテキストを展開または折りたたむことができ、ページがより簡潔で読みやすくなります。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











UseEffectとは何ですか?副作用を実行するためにどのように使用しますか?

JavaScriptの高次関数とは何ですか?また、より簡潔で再利用可能なコードを書くためにどのように使用できますか?

制御されたコンポーネントと制御されていないコンポーネントの利点と短所は何ですか?

usecontextとは何ですか?コンポーネント間で状態を共有するためにどのように使用しますか?
