欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實(shí)現(xiàn)單選折疊菜單功能

  發(fā)布時(shí)間:2021-10-26 15:04:22   作者:xosg   我要評(píng)論
今天教大家用純css實(shí)現(xiàn)一個(gè)單選的折疊菜單,不需要JavaScript就能用。折疊菜單和標(biāo)簽頁差不多,邏輯上都是一種單選面板,只不過折疊菜單一般是垂直堆疊的,標(biāo)簽頁是橫著排列,對(duì)實(shí)現(xiàn)代碼感興趣的朋友跟隨小編一起看看吧

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

dca0a8cfcb26d3cd87aed4ceeceee3b4.png

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

873ecdccbd4a9eda8905fa3dda8a95f3.gif

標(biāo)簽頁:

6af435a8d5daf3680c52d09d86cf2254.gif

既然是單選的,就可以用<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)是這樣的:

3734ce405520be5e763445ce517388d4.gif

還是先用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)其他樣式,就成了:

192e7d623a0ddedcc4811c5fab7db066.png

但是由于<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)了單選折疊菜單的反選能力:

a92c5f3b16fb6ea25513791832948417.gif

對(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)文章,希望大家以后多多支持腳本之家!

相關(guān)文章

  • CSS 實(shí)現(xiàn) 圖片鼠標(biāo)懸停折疊效果

    這篇文章主要介紹了CSS 實(shí)現(xiàn) 圖片鼠標(biāo)懸停折疊效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-09-21
  • 詳解CSS外邊距折疊引發(fā)的問題

    這篇文章主要介紹了詳解CSS外邊距折疊引發(fā)的問題的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-02-27
  • 詳解css外邊距折疊(margin collapsing)

    外邊距折疊指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距,本文詳細(xì)的介紹了一下css外邊距折疊的實(shí)現(xiàn),分為3種情況,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2018-10-30
  • 純CSS實(shí)現(xiàn)可折疊樹狀菜單

    這篇文章主要介紹了純CSS實(shí)現(xiàn)可折疊樹狀菜單,不用js讓你體會(huì)到css的強(qiáng)大,需要的朋友可以參考下
    2018-04-17
  • 通過HTML+CSS實(shí)現(xiàn)折疊樣式完整代碼

    這篇文章主要介紹了通過HTML+CSS實(shí)現(xiàn)折疊樣式完整代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-03

最新評(píng)論