不到萬不得已的時候千萬別引入前端UI框架，因為HTML5和CSS3已經能實現絕大多數的功能，比如上期的《CSS實現最簡潔的開關》

而很多人的思維還停留在web2.0時代，用各種庫來做UI，導致網頁臃腫。今天教大家用純css實現一個單選的折疊菜單，不需要JavaScript就能用。折疊菜單和標簽頁差不多，邏輯上都是一種單選面板，只不過折疊菜單一般是垂直堆疊的，標簽頁是橫著排列。

標簽頁：

既然是單選的，就可以用<input type="radio">單選按鈕來實現。首先這些單選按鈕組的父元素用<form>，因為<form>可以監(jiān)聽按鈕組的變化，同時還能通過name屬性直接得到RadioNodeList列表和變化值，非常方便，不用設置其他的css選擇器了。所以這個折疊菜單的html如下：

<form id="form">
    <input type="radio" name="collapse">
    <div></div>
 
    <input type="radio" name="collapse">
    <div></div>

    <input type="radio" name="collapse">
    <div></div>
</form>

給<form>設置id，這樣可以直接通過window[id]找到它，每個<radio>的name屬性要一致，然后通過form[name]得到單選組，form[name].value就是當前選中的按鈕的value，也就是折疊按鈕的標題，每個<radio>后面跟著一個<div>就是菜單展開的內容。但是<radio>默認是這樣的：

還是先用appearance: none禁用如上圖的默認樣式，然后利用::before作為按鈕左側的名稱（讀取value屬性），::after作為右側的小箭頭（字符>和v），通過:checked屬性表示折疊狀態(tài)。

input[type="radio"] {       
      cursor: pointer;
      appearance: none;
      display: block;
}
 
 
input[type="radio"]::before {
      content: attr(value);
}
 
 
input[type="radio"]::after {       
      float: right;
      content: ">";
}
 
 
input[type="radio"]:checked::after {
      content: "v";
}

對于<div>，默認是隱藏的，只有被選中的<radio>后面的<div>才顯示。至于折疊動畫的話，就看需求了，對我來說，沒有動畫會更清爽一點。

input[type="radio"] + div {
      display: none;
}
 
 
input[type="radio"]:checked + div {
      display: block;
}

以上就是基本布局，再加上一點其他樣式，就成了：

但是由于<radio>的特性，無法反選，菜單展開后想要折疊只能點別的菜單項，當然這也沒什么，如果非要實現反選菜單的功能，需要記錄上次展開的菜單項，每次發(fā)生點擊事件時，判斷是否重復點擊：

// for every <radio>
radio.onclick = () => {
  if (window.radio === radio) {
    input.checked = false;
    window.radio = null;
  } else window.radio = radio;
};

這樣就實現了單選折疊菜單的反選能力：

對了，圖中混亂的文字是原來文字被打亂的結果（隱私需要），可以通過下面的代碼將一個字符串打亂：

string.split('').sort(() => Math.random() - 0.5).join('')

到此這篇關于CSS實現單選折疊菜單功能的文章就介紹到這了,更多相關CSS單選折疊菜單內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

最新評論