10
社区成员
发帖
与我相关
我的任务
分享可折叠内容-在隐藏和显示大量内容之间切换
以下是一个使用 HTML、CSS 和 JavaScript 实现可折叠内容的示例代码：HTML:
<!DOCTYPE html>
<html>
<head>
<title>可折叠内容示例</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<button onclick="toggleContent()">展开/折叠</button>
<div id="content">
<!-- 这里添加你的大量内容 -->
<p>这是一些示例内容。</p>
<p>这是更多的示例内容。</p>
<p>这是更多更多的示例内容。</p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
#content {
display: none;
}
JavaScript (script.js):
function toggleContent() {
var content = document.getElementById("content");
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "none";
}
}
在上述代码中，我们首先在 HTML 中创建了一个按钮和一个包含大量内容的 <div> 元素。初始时，内容是隐藏的。
然后，在 CSS 中，我们将内容的显示状态设置为 none，以确保初始时内容是隐藏的。
最后，在 JavaScript 中，我们定义了一个 toggleContent 函数，该函数通过获取内容元素并切换其显示状态来实现展开/折叠功能。当点击按钮时，会调用 toggleContent 函数。
...全文
请发表友善的回复…
发表回复
