手風(fēng)琴式CSS也被稱為折疊菜單，是一種常用的網(wǎng)站導(dǎo)航設(shè)計(jì)。它的名字來自于手風(fēng)琴樂器，因?yàn)楫?dāng)你點(diǎn)擊其中一個(gè)標(biāo)簽時(shí)，其他標(biāo)簽會(huì)像手風(fēng)琴一樣折疊起來。

/* CSS代碼 */
.accordion {
overflow: hidden;
display: flex;
flex-direction: column;
}
.accordion__item {
border: 1px solid black;
margin-bottom: 10px;
}
.accordion__item-title {
padding: 10px;
background-color: gray;
color: white;
cursor: pointer;
}
.accordion__item-body {
padding: 10px;
display: none;
}
.accordion__item--active .accordion__item-body {
display: block;
}

以上是手風(fēng)琴式CSS常見的樣式代碼。在這個(gè)例子中，我們首先將菜單設(shè)置成flex布局，并使其每個(gè)項(xiàng)垂直排列。

然后，我們?yōu)槊總€(gè)菜單項(xiàng)添加邊框和外邊距，使它們看起來不同于其他元素。我們還為每個(gè)菜單項(xiàng)-title添加了背景顏色和白色文本顏色，以使標(biāo)題更加突出。

為了實(shí)現(xiàn)折疊效果，我們?cè)O(shè)置accordion__item-body的display為none，這意味著默認(rèn)情況下，內(nèi)容不可見。

最后，我們使用JavaScript為每個(gè)菜單項(xiàng)-title綁定單擊事件。當(dāng)回調(diào)函數(shù)被調(diào)用時(shí)，我們將點(diǎn)擊的項(xiàng)設(shè)置為“active”，并顯示其相關(guān)內(nèi)容。

手風(fēng)琴式CSS是一種非常有用的Web設(shè)計(jì)技術(shù)，可以幫助網(wǎng)站設(shè)計(jì)師在有限的空間內(nèi)更好地組織和呈現(xiàn)大量的信息。