如何仅使用 HTML 和 CSS 切换 Div 可见性？

使用 HTML 和 CSS 在点击时切换 Divs 显示

在本文中，我们的目标是提供一个解决方案来应对以下挑战：使用 HTML 和 CSS 技术在点击时显示和隐藏 div，而不依赖于 JavaScript 库，例如jQuery.

使用 HTML5 元素

利用 HTML5 标签 detail 和 summary，您可以实现可折叠 div无需额外的样式或脚本即可实现功能。这些标签为创建可折叠部分提供本机支持：

<details><br> <summary>Collapse 1</summary><br> <p>Content 1...</p><br></详细信息><br><详细信息><br> 折叠 2摘要><br> </p>
<p>内容2...</p><br></details><br>

用于样式的附加 CSS

同时上述方法处理可折叠行为，您可能希望增强 div 的视觉外观。下面是一个 CSS 代码片段示例：

details {<br> border: 1pxsolid #ccc;<br> margin-top: 10px;<br> padding: 10px;<br>}<br>摘要{<br>背景：#eee;<br>光标：指针;<br> 填充：5px;<br> 显示：块;<br>}<br>摘要：悬停 {<br> 背景：#ccc;<br>}<br>

通过实现这些技术，您可以有效地在 HTML 和 CSS 中创建可折叠部分，而不需要 jQuery 或其他 JavaScript图书馆。

以上是如何仅使用 HTML 和 CSS 切换 Div 可见性？的详细内容。更多信息请关注PHP中文网其他相关文章！