不到萬不得已的時(shí)候千萬別引入前端UI框架，因?yàn)镠TML5和CSS3已經(jīng)能實(shí)現(xiàn)絕大多數(shù)的功能，比如上期的《CSS實(shí)現(xiàn)最簡(jiǎn)潔的開關(guān)》

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

標(biāo)簽頁：

既然是單選的，就可以用<input type="radio">單選按鈕來實(shí)現(xiàn)。首先這些單選按鈕組的父元素用<form>，因?yàn)?lt;form>可以監(jiān)聽按鈕組的變化，同時(shí)還能通過name屬性直接得到RadioNodeList列表和變化值，非常方便，不用設(shè)置其他的css選擇器了。所以這個(gè)折疊菜單的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>設(shè)置id，這樣可以直接通過window[id]找到它，每個(gè)<radio>的name屬性要一致，然后通過form[name]得到單選組，form[name].value就是當(dāng)前選中的按鈕的value，也就是折疊按鈕的標(biāo)題，每個(gè)<radio>后面跟著一個(gè)<div>就是菜單展開的內(nèi)容。但是<radio>默認(rèn)是這樣的：

還是先用appearance: none禁用如上圖的默認(rèn)樣式，然后利用::before作為按鈕左側(cè)的名稱（讀取value屬性），::after作為右側(cè)的小箭頭（字符>和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";
}

對(duì)于<div>，默認(rèn)是隱藏的，只有被選中的<radio>后面的<div>才顯示。至于折疊動(dòng)畫的話，就看需求了，對(duì)我來說，沒有動(dòng)畫會(huì)更清爽一點(diǎn)。

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

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

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

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

這樣就實(shí)現(xiàn)了單選折疊菜單的反選能力：

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

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

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

最新評(píng)論