CSS旋轉折疊菜單是一個非常流行的菜單類型，可以在網站和應用程序中用來隱藏一些不必要的內容，從而增加頁面的簡潔性和易讀性。在本文中，我將向您介紹如何使用CSS代碼創建一個簡單的旋轉折疊菜單。

/* 定義樣式 */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .collapsible:hover {
background-color: #ccc;
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.rotate {
transform: rotate(180deg);
}
/* JavaScript功能 */
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i< coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
this.classList.remove("rotate");
} else {
content.style.maxHeight = content.scrollHeight + "px";
this.classList.add("rotate");
}
});
}

以上是我們的代碼。首先，我們設置了.collapsible類的樣式，該類應用于折疊菜單的可點擊部分。我們還定義了.active類的樣式，這將用于在用戶單擊菜單時為其應用樣式。最后，我們定義了.content類，該類應用于要折疊的內容，以及.rotate類，該類將在菜單被旋轉時應用。

在JavaScript功能中，我們使用了一個for循環，該循環遍歷了所有的.collapsible元素，并為每一個添加了一個點擊事件。當用戶單擊菜單時，我們使用this.classList.toggle()方法切換該元素的.active類。我們還獲取了該元素的下一個同級元素，以便在需要時展開或折疊其內容。最后，我們使用content.scrollHeight屬性來計算內容的最大高度，并使用content.style.maxHeight屬性將其設置為元素的高度。我們還添加了一個.rotate類，以便在菜單被旋轉時為其提供動畫效果。

現在，您已經學會了如何使用CSS和JavaScript創建一個簡單的旋轉折疊菜單。您可以根據您的需要進行調整和修改，以適應您的網站或應用程序的特定要求。