javascript實現一段文字展開收起

JavaScript實作一段文字的展開收起功能

隨著網頁設計越來越注重使用者體驗，越來越多的頁面設計中會出現需要展開或收起一段文字的情況，這時候我們可以使用JavaScript程式碼來實作這個功能。下面我們就來看看，如何使用JavaScript來實現一段文字的展開與收起功能。

1. HTML程式碼

首先，我們需要準備一段HTML程式碼，這段程式碼可以是需要展開收起的文字以及其餘的頁面元素。範例程式碼如下：

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

在這段程式碼中，我們用一個<div>標籤來包裝需要展開收起的文字以及按鈕元素。在<code><div>標籤中，我們用一個<code><p></p>標籤來顯示需要展開收起的文字內容，在文字內容的下方，使用一個&lt ;button>標籤來顯示「查看更多」的按鈕。

2. 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;
  /* 设置鼠标指针为手型 */
}

3. JavaScript程式碼

接下來，我們需要使用JavaScript程式碼來實作「看更多」按鈕的點擊事件，讓點擊按鈕時可以展開或收起需要展開收起的文字。

首先，我們可以建立一個變數來儲存目前是否處於展開狀態，初始狀態為false，即處於折疊狀態。

let isExpanded = false;

當使用者點擊「查看更多」按鈕時，我們需要取得需要展開收起的文字的<p></p>元素，並為這個元素新增或移除一個is-expanded的class。同時，更改按鈕的文字內容，顯示“更少”或“查看更多”，以提示使用者目前的文字狀態。

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 = '查看更多';
  }
});

在這段程式碼中，我們首先使用document.querySelector()方法取得到需要展開收起的文字對應的<p></p>元素和“查看更多”按鈕對應的<button></button>元素。然後，為按鈕元素新增一個點擊事件監聽器，當使用者點擊按鈕時會觸發這個事件。

在事件監聽器中，我們會透過isExpanded變數的狀態來判斷目前文字處於展開狀態還是折疊狀態。如果是展開狀態，我們會為<p></p>元素新增一個is-expanded的class，並將按鈕的文字設定為「收起」。反之，我們會移除is-expanded的class，並將按鈕的文字設定為「查看更多」。

到此為止，我們就成功地實現了一段文字的展開收起功能。當使用者點擊「查看更多」按鈕時，可以展開或折疊需要展開收起的文字，讓頁面更加的簡潔和易於閱讀。