在網站中，常見問題列表是一個非常常見的組件。它通常包含一系列問答文字列表，用戶可以通過點擊問題標題來展開或收縮相應的回答內容。這種交互式組件使得用戶能夠更快速地找到他們感興趣的答案，并且也提高了用戶的體驗。

在本文中，我們將探討如何使用jQuery來創建一個具有下拉收縮效果的常見問題列表。

HTML結構

我們需要創建一個HTML結構，包含所有的問題和答案。我們將使用無序列表（<ul>）來表示整個列表，并為每個問題/答案對創建一個列表項（<li>）。每個列表項將包含兩個元素：問題標題（<h2>）和答案內容（<p>）：

<ul class="faq">
  <li>
    <h2>問題1</h2>
    <p>答案1</p>
  </li>
  <li>
    <h2>問題2</h2>
    <p>答案2</p>
  </li>
  <!-- 其他問題和答案 -->
</ul>

CSS樣式

我們需要添加CSS樣式來定義問題和答案的外觀，并設置默認情況下答案是隱藏的。我們將使用以下CSS樣式：

.faq li {
  margin-bottom: 10px;
}

.faq h2 {
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.faq p {
  display: none;
  font-size: 14px;
  line-height: 1.5;
}

在這里，我們定義了問題標題為粗體字，并添加了一個指針樣式以提示用戶可以點擊。我們還隱藏了答案內容，因為我們希望它默認情況下是收起的。

jQuery腳本

我們需要使用jQuery來實現下拉收縮效果。我們將使用click()方法來捕捉每個問題標題上的鼠標單擊事件，并使用slideToggle()方法來切換相應的答案內容的顯示狀態（打開或關閉）。

$(document).ready(function() {
  $('.faq h2').click(function() {
    $(this).next('p').slideToggle();
  });
});

在這里，我們將代碼包裝在$(document).ready()函數中，以確保當頁面加載時所有元素都已準備好。我們使用選擇器$('.faq h2')來捕捉每個問題標題元素，并使用click()方法將一個單擊事件綁定到它們上。我們使用slideToggle()方法來切換相鄰的答案段落元素的顯示狀態。

完整代碼

最終，我們的完整代碼如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>常見問題列表</title>
  <style>
    .faq li {
      margin-bottom: 10px;
    }

    .faq h2 {
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      margin: 0;
    }

    .faq p {
      display: none;
      font-size: 14px;
      line-height: 1.5;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.faq h2').click(function() {
        $(this).next('p').slideToggle();
      });
    });
  </script>
</head>
<body>
  <ul class="faq">
    <li>
      <h2>問題1</h2>
      <p>答案1</p>
    </li>
    <li>
      <h2>問題2</h2>
      <p>答案2</p>
	</li>
	<!-- 其他問題和答案 -->
	</ul>
</body>
</html>

使用jQuery可以非常容易地實現一個帶有下拉收縮效果的常見問題列表。我們需要定義HTML結構和CSS樣式，使用jQuery將單擊事件綁定到問題標題上，并在單擊時切換相應的答案內容的顯示狀態。

通過這種方式，我們可以為用戶提供一個交互式組件，使他們更容易找到自己感興趣的答案并提高網站的可用性。