點(diǎn)擊加號控制折疊內(nèi)容區(qū)域展開或關(guān)閉代碼分享，實(shí)例截圖如下：
html代碼如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可折疊內(nèi)容區(qū)域</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 開發(fā)基礎(chǔ)</div>
<div class="accordion-icon"><i class="bi bi-plus-lg"></i></div>
</div>
<div class="accordion-content">
<div class="content">
<h3>前端開發(fā)核心技術(shù)</h3>
<p>現(xiàn)代前端開發(fā)建立在三大基礎(chǔ)技術(shù)之上：</p>
<ul>
<li><strong>HTML</strong> - 網(wǎng)頁內(nèi)容的結(jié)構(gòu)和語義</li>
<li><strong>CSS</strong> - 網(wǎng)頁的樣式和布局</li>
<li><strong>JavaScript</strong> - 網(wǎng)頁的交互行為和動(dòng)態(tài)效果</li>
</ul>
<p>掌握這三種技術(shù)是成為一名前端開發(fā)者的基礎(chǔ)。隨著技術(shù)的發(fā)展，現(xiàn)代前端開發(fā)還涉及到許多框架和工具，如React、Vue、Angular等，但核心原理仍然基于這些基礎(chǔ)技術(shù)。</p>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<div class="accordion-title">響應(yīng)式設(shè)計(jì)原則</div>
<div class="accordion-icon"><i class="bi bi-plus-lg"></i></div>
</div>
<div class="accordion-content">
<div class="content">
<h3>響應(yīng)式網(wǎng)頁設(shè)計(jì)</h3>
<p>響應(yīng)式設(shè)計(jì)使網(wǎng)站能夠適應(yīng)不同設(shè)備和屏幕尺寸，提供最佳的用戶體驗(yàn)。關(guān)鍵原則包括：</p>
<ul>
<li><strong>流式網(wǎng)格布局</strong> - 使用百分比而非固定寬度</li>
<li><strong>彈性圖片</strong> - 圖片能隨容器大小調(diào)整</li>
<li><strong>媒體查詢</strong> - 根據(jù)設(shè)備特性應(yīng)用不同樣式</li>
<li><strong>移動(dòng)優(yōu)先</strong> - 先設(shè)計(jì)移動(dòng)端體驗(yàn)再逐步增強(qiáng)</li>
</ul>
<p>在移動(dòng)設(shè)備使用量超過桌面的今天，響應(yīng)式設(shè)計(jì)已成為現(xiàn)代網(wǎng)站開發(fā)的標(biāo)準(zhǔn)要求。</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 在網(wǎng)頁交互中的作用</h3>
<p>JavaScript 為網(wǎng)頁添加了動(dòng)態(tài)行為和交互功能：</p>
<ul>
<li>響應(yīng)用戶操作（點(diǎn)擊、滾動(dòng)、輸入等）</li>
<li>動(dòng)態(tài)更新頁面內(nèi)容（無需重新加載）</li>
<li>發(fā)送和接收服務(wù)器數(shù)據(jù)（AJAX）</li>
<li>創(chuàng)建動(dòng)畫和視覺效果</li>
<li>驗(yàn)證表單輸入</li>
</ul>
<p>隨著ES6及后續(xù)版本的發(fā)布，JavaScript的功能更加強(qiáng)大，語法更加現(xiàn)代化。配合各種框架和庫，JavaScript已成為構(gòu)建復(fù)雜Web應(yīng)用的核心技術(shù)。</p>
</div>
</div>
</div>
<script>
function toggleAccordion(header) {
// 獲取關(guān)聯(lián)的內(nèi)容區(qū)域
const content = header.nextElementSibling;
const icon = header.querySelector('.accordion-icon');
// 切換活動(dòng)狀態(tài)
header.classList.toggle('active');
// 切換內(nèi)容顯示狀態(tài)
content.classList.toggle('show');
// 切換圖標(biāo)
if (header.classList.contains('active')) {
icon.innerHTML = '<i class="bi bi-dash-lg"></i>';
} else {
icon.innerHTML = '<i class="bi bi-plus-lg"></i>';
}
}
// 初始展示第一個(gè)內(nèi)容區(qū)域
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>我是有底線的
掃描二維碼手機(jī)查看該文章
文章引用：http://www.qingbaosc.com/news/webzhishi/1518.html
在線咨詢
電話咨詢
