内容收缩展开的js效果

内容收缩展开的JavaScript效果通常用于网页上的交互设计，允许用户通过点击按钮或其他触发器来显示或隐藏部分内容。这种效果可以提升用户体验，使页面更加整洁和易于导航。

基础概念

这种效果主要依赖于JavaScript来控制DOM元素的显示与隐藏。通常使用CSS来设置元素的初始状态（如display: none;）和展开状态（如display: block;），然后通过JavaScript来切换这些状态。

类型

点击展开/收缩：用户点击标题或按钮时，内容区域展开或收缩。
悬停展开：鼠标悬停在某个元素上时，相关内容自动展开显示。

应用场景

FAQ页面：常见问题列表，点击问题项展开答案。
长篇文章：允许用户点击标题查看文章全文或摘要。
设置菜单：在设置页面中，点击子菜单项展开详细选项。

示例代码

以下是一个简单的JavaScript示例，展示了如何实现点击按钮来展开和收缩内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>收缩展开示例</title>
<style>
.content {
  display: none;
}
.expanded {
  display: block;
}
</style>
</head>
<body>

<button id="toggleButton">显示/隐藏内容</button>
<div id="content" class="content">
  这里是需要展开或收缩的内容。
</div>

<script>
document.getElementById('toggleButton').addEventListener('click', function() {
  var content = document.getElementById('content');
  content.classList.toggle('expanded');
});
</script>

</body>
</html>