可以在沒有 jQuery 的情況下用 HTML 和 CSS 建立可折疊內容嗎？

在沒有jQuery 的情況下在HTML 和CSS 中創建可折疊內容

許多設計師努力創建像jQuery Mobile 主題中展示的可折疊內容。然而，值得考慮的是對於此類功能是否需要使用 jQuery。本文探討了使用純 HTML 和 CSS 實現此目的的可能性，並提供了幾個範例來展示其可行性。

使用 HTML5 的 和標籤

HTML5 引入了和專門為此目的設計的標籤。這些標籤不需要額外的樣式或腳本。

<details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>

利用自訂 CSS 樣式

為了對可折疊內容的外觀和行為進行更精細的控制，自訂 CSS可以

details {
  border: 1px solid black;
  padding: 10px;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

details[open] summary {
  color: green;
}

details[open] p {
  display: block;
}

在此範例中，可折疊部分的邊框和填充為已定義，而當滑鼠懸停在摘要上時，遊標會變成指標。 open 屬性用於變更摘要的顏色以及顯示/隱藏內容。

其他範例

以下範例展示了替代方法：

• 使用單選按鈕：為每個可折疊部分建立單獨的單選按鈕可以更「傳統」的折疊和展開行為。
• 不帶 jQuery 的自訂 JavaScript： 使用內聯 JavaScript 函數來切換可折疊部分的可見性消除了對 jQuery 的需要，但仍然添加了外部腳本。
• 使用Vue.js: 利用輕量級JavaScript 框架，例如Vue.js 提供了一種結構化方法來管理狀態和反應性，使其適合更複雜的可折疊內容。
• 具有流體排版的 CSS Awnings： 該技術使用純 CSS 和流體排版來模擬遮陽篷的折疊和展開效果可以定制以適應不同的屏幕尺寸。

以上是可以在沒有 jQuery 的情況下用 HTML 和 CSS 建立可折疊內容嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！