点击加号控制折叠内容区域展开或关闭代码分享，实例截图如下：
html代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可折叠内容区域</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color:#fff;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.accordion {
width: 100%;
overflow: hidden;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.accordion-header {
height: 50px;
background-color: #8377b4;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.accordion-header:hover {
background-color: #c1bbd9;
}
.accordion-header.active {
background-color: #c1bbd9;
}
.accordion-title {
color: white;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.accordion-icon {
color: white;
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.accordion-content {
background-color: white;
padding: 0;
max-height: 0;
overflow: hidden;
transition: all 0.4s ease;
}
.accordion-content.show {
padding: 25px;
max-height: 500px;
}
.content {
color: #555;
line-height: 1.8;
font-size: 1rem;
}
.content h3 {
color: #8377b4;
margin-bottom: 15px;
}
.content p {
margin-bottom: 15px;
}
.content ul {
padding-left: 20px;
margin-bottom: 20px;
}
.content li {
margin-bottom: 8px;
position: relative;
padding-left: 15px;
}
.content li:before {
content: "•";
color: #8377b4;
position: absolute;
left: 0;
font-size: 1.2rem;
}
@media (max-width: 600px) {
h1 {
font-size: 2.2rem;
}
.accordion-title {
font-size: 1rem;
}
.accordion-content.show {
padding: 20px;
}
}
</style>
</head>
<body>
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<div class="accordion-title">Web 开发基础</div>
<div class="accordion-icon"><i class="bi bi-plus-lg"></i></div>
</div>
<div class="accordion-content">
<div class="content">
<h3>前端开发核心技术</h3>
<p>现代前端开发建立在三大基础技术之上：</p>
<ul>
<li><strong>HTML</strong> - 网页内容的结构和语义</li>
<li><strong>CSS</strong> - 网页的样式和布局</li>
<li><strong>JavaScript</strong> - 网页的交互行为和动态效果</li>
</ul>
<p>掌握这三种技术是成为一名前端开发者的基础。随着技术的发展，现代前端开发还涉及到许多框架和工具，如React、Vue、Angular等，但核心原理仍然基于这些基础技术。</p>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<div class="accordion-title">响应式设计原则</div>
<div class="accordion-icon"><i class="bi bi-plus-lg"></i></div>
</div>
<div class="accordion-content">
<div class="content">
<h3>响应式网页设计</h3>
<p>响应式设计使网站能够适应不同设备和屏幕尺寸，提供最佳的用户体验。关键原则包括：</p>
<ul>
<li><strong>流式网格布局</strong> - 使用百分比而非固定宽度</li>
<li><strong>弹性图片</strong> - 图片能随容器大小调整</li>
<li><strong>媒体查询</strong> - 根据设备特性应用不同样式</li>
<li><strong>移动优先</strong> - 先设计移动端体验再逐步增强</li>
</ul>
<p>在移动设备使用量超过桌面的今天，响应式设计已成为现代网站开发的标准要求。</p>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<div class="accordion-title">JavaScript 交互</div>
<div class="accordion-icon"><i class="bi bi-plus-lg"></i></div>
</div>
<div class="accordion-content">
<div class="content">
<h3>JavaScript 在网页交互中的作用</h3>
<p>JavaScript 为网页添加了动态行为和交互功能：</p>
<ul>
<li>响应用户操作（点击、滚动、输入等）</li>
<li>动态更新页面内容（无需重新加载）</li>
<li>发送和接收服务器数据（AJAX）</li>
<li>创建动画和视觉效果</li>
<li>验证表单输入</li>
</ul>
<p>随着ES6及后续版本的发布，JavaScript的功能更加强大，语法更加现代化。配合各种框架和库，JavaScript已成为构建复杂Web应用的核心技术。</p>
</div>
</div>
</div>
<script>
function toggleAccordion(header) {
// 获取关联的内容区域
const content = header.nextElementSibling;
const icon = header.querySelector('.accordion-icon');
// 切换活动状态
header.classList.toggle('active');
// 切换内容显示状态
content.classList.toggle('show');
// 切换图标
if (header.classList.contains('active')) {
icon.innerHTML = '<i class="bi bi-dash-lg"></i>';
} else {
icon.innerHTML = '<i class="bi bi-plus-lg"></i>';
}
}
// 初始展示第一个内容区域
document.addEventListener('DOMContentLoaded', function() {
const firstHeader = document.querySelector('.accordion-header');
const firstContent = firstHeader.nextElementSibling;
const firstIcon = firstHeader.querySelector('.accordion-icon');
firstHeader.classList.add('active');
firstContent.classList.add('show');
firstIcon.innerHTML = '<i class="bi bi-dash-lg"></i>';
});
</script>
</body>
</html>我是有底线的
扫描二维码手机查看该文章
文章引用：https://www.qinghuahulian.com/news/webzhishi/1518.html
- 上一篇：没有了！
- 下一篇：酒庄参观预约表单系统代码分享
在线咨询
电话咨询
