可以在没有 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中文网其他相关文章！