JavaScript はテキストの展開と折りたたみを実装します

JavaScript は、テキストの段落の展開および折りたたみ機能を実装します。

Web デザインではユーザー エクスペリエンスがますます重視されるようになり、テキストの段落を展開または折りたたむ必要があるページ デザインがますます増えます。場合によっては、JavaScript コードを使用してこの機能を実現できます。 JavaScript を使用してテキストを展開したり折りたたんだりする方法を見てみましょう。

1. HTML コード

まず、HTML コードを準備する必要があります。このコードには、展開したり折りたたんだりする必要があるテキストと、残りの部分を含めることができます。ページ要素。サンプル コードは次のとおりです。

<div class="content">
  <p>这是一段需要展开收起的文字，可以有很多很多的字，可能会占据很多的空间。因此，在默认情况下，我们只会显示部分文字，而把其余的部分折叠起来。如果需要查看全部内容，可以点击“查看更多”按钮，文字内容就会展开显示了。</p>
  <button class="btn-more">查看更多</button>
</div>

このコードでは、<div> タグを使用して、展開および折りたたむ必要があるテキスト要素とボタン要素をラップします。 <code><div> タグでは、<code><p></p> タグを使用して、展開および折りたたむ必要があるテキスト コンテンツを表示します。テキスト コンテンツの下に、## を使用します。 #< ;button>タグを使用すると「続きを見る」ボタンが表示されます。

CSS スタイル

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 コード

次に、JavaScript コードを使用して「もっと見る」ボタンのクリック イベントを実装し、ボタンを展開したり折りたたんだりできるようにする必要があります。ボタンがクリックされたとき 展開または折りたたむ必要があるテキスト。 <p></p>まず、現在展開状態にあるかどうかを保存する変数を作成できます。初期状態は false、つまり折りたたまれた状態であることを意味します。

let isExpanded = false;

ユーザーが「もっと見る」ボタンをクリックしたとき、テキストを展開したり折りたたんだり、# を追加または削除したりする必要がある <p></p>

要素を取得する必要があります。この要素 ##is-expanded のクラス。同時に、ボタンのテキストの内容を変更して「Less」または「View More」を表示し、現在のテキストのステータスをユーザーに思い出させます。 <pre class='brush:php;toolbar:false;'>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 = '查看更多'; } });</pre>このコードでは、まず

document.querySelector()

メソッドを使用して、展開する必要があるテキストに対応する <p></p> 要素を取得します。 「View More」ボタンに対応する <button></button> 要素。次に、ボタン要素にクリック イベント リスナーを追加します。これは、ユーザーがボタンをクリックしたときに起動されます。 イベント リスナーでは、

isExpanded

変数のステータスを使用して、現在のテキストが展開されているか折りたたまれているかを判断します。展開状態の場合は、クラス is-expanded を <p></p> 要素に追加し、ボタンのテキストを「Collapse」に設定します。代わりに、is-expanded クラスを削除し、ボタンのテキストを「もっと見る」に設定します。 これまでのところ、テキストの段落の展開および折りたたみ機能を正常に実装できました。ユーザーが「もっと見る」ボタンをクリックすると、展開または折りたたむ必要があるテキストを展開または折りたたむことができ、ページがより簡潔で読みやすくなります。