div 可折叠,代码示例

div 可折叠是指在网页中使用 div 元素来实现折叠效果，即点击一个按钮或链接时，相关内容隐藏或展示。这种效果通常用于展示大量内容，使页面更加简洁和易读。在实现可折叠的 div 元素时，我们可以使用 JavaScript 或 CSS 来控制其显示和隐藏。

下面是一个使用 JavaScript 实现的 div 可折叠的示例代码：

HTML 代码：

<button onclick="toggleContent()">点击折叠</button>
<div id="content" style="display: none;">
  这是可折叠的内容。
</div>

JavaScript 代码：

function toggleContent() {
  var contentDiv = document.getElementById("content");
  if (contentDiv.style.display === "none") {
    contentDiv.style.display = "block";
  } else {
    contentDiv.style.display = "none";
  }
}

在上面的示例中，我们首先创建了一个按钮元素，并给它添加了一个点击事件处理函数 `toggleContent()`。在点击按钮时，该函数会获取到 id 为 "content" 的 div 元素，并通过判断其 `display` 属性来决定是显示还是隐藏。如果 div 元素的 `display` 属性为 "none"，则将其设置为 "block"，使其显示出来；如果 `display` 属性不为 "none"，则将其设置为 "none"，使其隐藏起来。

通过以上的代码实现，我们就可以在网页中实现一个可折叠的 div 元素。当点击按钮时，相关内容会显示或隐藏，以达到折叠的效果。