CSS寫三級手風琴效果

.accordian {
max-width: 600px;
margin: 0 auto;
}
.accordion_section {
border: 1px solid #ddd;
margin-bottom: 10px;
}
.accordion_section .accordion_title {
cursor: pointer;
padding: 10px;
background-color: #f8f8f8;
font-weight: bold;
border-bottom: 1px solid #ddd;
}
.accordion_section .accordion_title.active {
background-color: #ccc;
color: #fff;
}
.accordion_section .accordion_content {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease-out;
}
.accordion_section.active .accordion_content {
max-height: 1000px;
padding: 10px;
}

手風琴效果實現

手風琴效果的實現是通過CSS的transition屬性結合JavaScript的添加/刪除CSS類名來完成的。首先，我們需要在HTML中創建一個包含手風琴項的.div元素。.div元素中包含多個.accordion_section元素，每個元素分為.accordion_title和.accordion_content兩個部分。.accordion_title元素用于作為手風琴的標題，點擊它將展開/收縮該手風琴項的內容，.accordion_content元素是手風琴的內容，當手風琴項展開時將顯示。

實現手風琴展開/收縮的方法是將.active類應用到被點擊的.accordion_title元素的父元素.accordion_section中。.active類可以通過JavaScript添加/刪除。當一個手風琴項處于展開狀態時，.accordion_section元素會擁有.active類，手風琴的內容將根據.max-height屬性展開(如果手風琴項的內容高度大于.max-height，則內容將在.max-height處截斷)。在手風琴項被收縮之前，.active類將被從.accordion_section元素中刪除，使手風琴的內容消失。