欧美午夜诱惑在线_一区二区三级片_国产成人综合v在线_国产91精品无码免费_高清综合亚洲三级_黄色软件下载观看_上萬網友分享国产精品高潮呻吟久久av心得_美女扒开尿眼无遮挡免费视频_好紧好湿好黄的视频免费_亚洲日韩欧美中字五月天

不到萬不得已的時候千萬別引入前端UI框架，因為HTML5和CSS3已經(jīng)能實現(xiàn)絕大多數(shù)的功能

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

標簽頁：

既然是單選的，就可以用<input type="radio">單選按鈕來實現(xiàn)。首先這些單選按鈕組的父元素用<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>就是菜單展開的內(nèi)容。但是<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>的特性，無法反選，菜單展開后想要折疊只能點別的菜單項，當然這也沒什么，如果非要實現(xiàn)反選菜單的功能，需要記錄上次展開的菜單項，每次發(fā)生點擊事件時，判斷是否重復點擊：

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

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

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

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

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：[email protected]進行舉報，并提供相關證據(jù)，查實之后，將立刻刪除涉嫌侵權內(nèi)容。

猜你喜歡

• CSS動畫新特性@scroll-timeline的作用和用法是什么

  在之前的文章《2022年你值得了解的幾個CSS新特性（收藏學習）?》中帶大家簡單介紹了幾個CSS新特性，今天帶大家深入了解其中的一個新特性（動畫殺手锏）：@scroll-timeline，希望對大家有所幫助！

• 用Canvas如何把圖片轉(zhuǎn)素描的效果，原理和方法是什么

  本章給大家介紹html5如何利用canvas實現(xiàn)圖片轉(zhuǎn)素描效果。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

• CSS中怎么改變圖片顏色，都有哪些方法技巧

  本文給大家分享一百種方法幫助大家解決CSS改變圖片顏色，本文圖文并茂給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧

• 使用CSS怎樣實現(xiàn)元素粘滯效果？方法是什么？

  使用CSS怎樣實現(xiàn)元素粘滯效果？很多朋友可以不是很了解什么是粘滯效果，也就是從一個元素中，點擊會出現(xiàn)多個元素的效果，例如下文這樣的點擊分享的功能，那么這個效果是怎樣做的呢？接下來就給大家簡單的介紹一下。

• CSS怎樣實現(xiàn)網(wǎng)頁淡入效果，方法是什么？

  這篇文章給大家分享的是CSS怎樣實現(xiàn)網(wǎng)頁淡入效果的示例。小編覺得挺實用的，因此分享給大家做個參考，文中的示例代碼介紹得很詳細，有需要的朋友可以參考，接下來就跟隨小編一起了解看看吧。