使用CSS3可以輕松實現手風琴效果，即在幾個可折疊的內容之間進行切換，只展開一個選項時，其他選項都會折疊起來。 手風琴效果通常涉及到設置高度和過渡效果，但是當高度不固定時，怎么實現呢？ 我們可以使用CSS3中的max-height屬性來解決這個問題。max-height允許元素的高度自適應其內部內容的大小，同時又不必在CSS中提前指定一個固定高度。 具體實現方法如下： HTML代碼： `````` CSS代碼： ``` .accordion { display: block; } .panel { background-color: #f4f4f4; margin: 10px; padding: 10px; } .panel h3 { margin: 0; padding: 0; cursor: pointer; } .panel p { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .panel.active p { max-height: 1000px; transition: max-height 0.3s ease-out; } ``` 以上代碼中，我們首先將手風琴容器的display屬性設置為block，然后給每一個可折疊的面板設置一個panel類。這些面板包括一個標題和一個內容區域，其中標題部分設置了一個指針樣式，以便用戶能夠點擊它來切換面板內容。 接著，我們用max-height屬性來確定內容區域的最大高度，并且使用overflow:hidden屬性以確保超出最大高度部分的內容被隱藏。最后，我們使用transition屬性添加一個過渡動畫，使得高度的變化看起來更加平滑。 當一個面板被打開時，我們將相應面板的panel類添加一個active類。這樣，我們就可以使用CSS選擇器來為當前面板的內容區域重置max-height和過渡屬性，使得內容區域能夠完全展開并呈現動畫效果。 總結： 以上就是通過CSS3實現手風琴高度不固定的方法。通過使用max-height屬性和過渡動畫，我們可以輕松地創建一個流暢的手風琴效果，它不僅能夠根據內容自適應高度，而且還能在切換面板時呈現出優雅的動畫。