日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當(dāng)前位置:首頁(yè) > 科技  > 軟件

原生Details支持手風(fēng)琴模式了!

來(lái)源: 責(zé)編: 時(shí)間:2024-01-08 17:10:55 211觀看
導(dǎo)讀最近details元素新增了一個(gè)name屬性,如下圖片別看這只是一個(gè)普普通通的屬性,這可是帶來(lái)了一個(gè)全新的模式,一起了解一下吧一、快速了解 details有些同學(xué)可能從來(lái)沒(méi)有用過(guò)details這個(gè)標(biāo)簽,這里簡(jiǎn)單介紹一下。details通常和s

最近details元素新增了一個(gè)name屬性,如下Ufy28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片Ufy28資訊網(wǎng)——每日最新資訊28at.com

別看這只是一個(gè)普普通通的屬性,這可是帶來(lái)了一個(gè)全新的模式,一起了解一下吧Ufy28資訊網(wǎng)——每日最新資訊28at.com

一、快速了解 details

有些同學(xué)可能從來(lái)沒(méi)有用過(guò)details這個(gè)標(biāo)簽,這里簡(jiǎn)單介紹一下。Ufy28資訊網(wǎng)——每日最新資訊28at.com

details通常和summary配合使用,天然支持展開(kāi)收起的效果。例如Ufy28資訊網(wǎng)——每日最新資訊28at.com

<details>  <summary>System Requirements</summary>  <p>Requires a computer running an operating system. The computer  must have some memory and ideally some kind of long-term storage.  An input device as well as some form of output device is  recommended.</p></details>

效果如下Ufy28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片Ufy28資訊網(wǎng)——每日最新資訊28at.com

雖然有些難看,但都是可以通過(guò) CSS 自定義的。Ufy28資訊網(wǎng)——每日最新資訊28at.com

如果想去除這個(gè)“黑色三角”,這個(gè)“黑色三角”其實(shí)是 ::marker生成的,,而這個(gè) ::marker是通過(guò)list-style生成,所以要去除可以這樣Ufy28資訊網(wǎng)——每日最新資訊28at.com

summary{  list-style: none;}/*或者*/summary{  display: flex; /*默認(rèn)是list-style*/}

還支持嵌套,進(jìn)一步美化可以實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)目錄Ufy28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片Ufy28資訊網(wǎng)——每日最新資訊28at.com

以后碰到類似的交互就直接用這個(gè)標(biāo)簽吧,別用JS了Ufy28資訊網(wǎng)——每日最新資訊28at.com

二、新增的 name 屬性

和大多數(shù)表單元素一樣,這個(gè)name也是可以直接設(shè)置和獲取的Ufy28資訊網(wǎng)——每日最新資訊28at.com

details.name; // 獲取details.name = 'xxx'; // 設(shè)置

除此之外,還支持了“手風(fēng)琴”模式。所謂“手風(fēng)琴”模式,相信大家都有所耳聞,就是多個(gè)折疊面板,打開(kāi)其中一個(gè)會(huì)關(guān)閉其他的,比如下方是ant design中的手風(fēng)琴效果Ufy28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片Ufy28資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)在如果用details就可以很輕易的實(shí)現(xiàn)這個(gè)效果,結(jié)構(gòu)如下Ufy28資訊網(wǎng)——每日最新資訊28at.com

<div class="con">  <details>    <summary>歡迎</summary>    <p>最近 details元素新增了一個(gè)name屬性</p>  </details>  <details>    <summary>關(guān)注</summary>    <p>別看這只是一個(gè)普普通通的屬性,這可是帶來(lái)了一個(gè)全新的模式,一起了解一下吧</p>  </details>  <details>    <summary>前端</summary>    <p>details通常和summary配合使用,天然支持展開(kāi)收起的效果</p>  </details>  <details>    <summary>偵探</summary>    <p>雖然有些難看,但都是可以通過(guò) CSS 自定義的</p>  </details></div>

效果如下Ufy28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片Ufy28資訊網(wǎng)——每日最新資訊28at.com

嗯,有點(diǎn)丑...我們美化一下Ufy28資訊網(wǎng)——每日最新資訊28at.com

.con{  width: 300px;  border-radius: 8px;  border: 1px solid #9747FF;  background-color: #fdf0ca ;  overflow: hidden;}summary{  display: flex;  align-items: center;  line-height: 2;  padding: 0 10px;  cursor: pointer;  border-bottom: 1px solid #9747FF;  background-color: #FFE8A3;}summary::before{  content: '';  width: 20px;  height: 20px;  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E %3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'%3E%3C/path%3E %3C/svg%3E") center/50% no-repeat;  opacity: .6;  transform: rotate(-90deg);}details[open] summary::before{  transform: rotate(0deg);}p{  margin: 0;  padding: 5px 10px;  border-bottom: 1px solid #9747FF;}details:last-child p,details:last-child:not([open]) summary{  border: 0;}

效果如下Ufy28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片Ufy28資訊網(wǎng)——每日最新資訊28at.com

不過(guò)現(xiàn)在每個(gè)折疊面板是互相獨(dú)立的,都可以打開(kāi)或者關(guān)閉。Ufy28資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)在我們想要把這幾個(gè)面板關(guān)聯(lián)起來(lái),就像單選框一樣,用相同的name表示Ufy28資訊網(wǎng)——每日最新資訊28at.com

<div class="con">  <details name="a">    <summary>歡迎</summary>    <p>最近 details元素新增了一個(gè)name屬性</p>  </details>  <details name="a">    <summary>關(guān)注</summary>    <p>別看這只是一個(gè)普普通通的屬性,這可是帶來(lái)了一個(gè)全新的模式,一起了解一下吧</p>  </details>  <details name="a">    <summary>前端</summary>    <p>details通常和summary配合使用,天然支持展開(kāi)收起的效果</p>  </details>  <details name="a">    <summary>偵探</summary>    <p>雖然有些難看,但都是可以通過(guò) CSS 自定義的</p>  </details></div>

這樣就是實(shí)現(xiàn)了手風(fēng)琴的效果了Ufy28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片Ufy28資訊網(wǎng)——每日最新資訊28at.com

是不是非常簡(jiǎn)單呢?Ufy28資訊網(wǎng)——每日最新資訊28at.com

三、還是需要 polyfill 一下

雖然好用,但是兼容性還不行,需要用一段 JS 來(lái)兜個(gè)底。Ufy28資訊網(wǎng)——每日最新資訊28at.com

首先我們需要判斷一下,也就是檢測(cè)details到底支不支持name這個(gè)特性,這個(gè)很簡(jiǎn)單,我們只需要?jiǎng)?chuàng)建一個(gè)details元素,然后看這個(gè)屬性是否存在就行了,如下Ufy28資訊網(wǎng)——每日最新資訊28at.com

'name' in document.createElement('details');

效果如下Ufy28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片Ufy28資訊網(wǎng)——每日最新資訊28at.com

對(duì)于不支持的瀏覽器,我們就需要通過(guò)監(jiān)聽(tīng)打開(kāi)關(guān)閉狀態(tài)了,直接監(jiān)聽(tīng)click事件Ufy28資訊網(wǎng)——每日最新資訊28at.com

details元素其實(shí)還有一個(gè)toggle事件,也可以用于監(jiān)聽(tīng),但是在這里不太合適,因?yàn)閠oggle是在狀態(tài)改變后才觸發(fā),有點(diǎn)晚了,會(huì)造成閃爍的問(wèn)題Ufy28資訊網(wǎng)——每日最新資訊28at.com


Ufy28資訊網(wǎng)——每日最新資訊28at.com

我們需要監(jiān)聽(tīng)所有的details元素,然后根據(jù)name屬性,把其他相同name的都關(guān)閉,具體實(shí)現(xiàn)如下Ufy28資訊網(wǎng)——每日最新資訊28at.com

// details name polyfillif (!('name' in document.createElement('details'))) {  const details = [...document.querySelectorAll('details')]  details.forEach(el => {    el.addEventListener('click', () => {      if (!el.open) {        details.filter(d => d.getAttribute('name') === el.getAttribute('name') && d!==el && d.open).forEach(m => {          m.open = false        })      }    })  })}

我們現(xiàn)在來(lái)看Firefox的效果Ufy28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片Ufy28資訊網(wǎng)——每日最新資訊28at.com

同樣支持多個(gè)分組,每個(gè)分組設(shè)置相同的name就行Ufy28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片Ufy28資訊網(wǎng)——每日最新資訊28at.com

完整代碼可以訪問(wèn)以下鏈接:Ufy28資訊網(wǎng)——每日最新資訊28at.com

  • details with name (juejin.cn)[1]
  • details with name (codepen.io)[2]

四、總結(jié)一下

總的來(lái)說(shuō)是一個(gè)不痛不癢的新特性,你學(xué)到了,下面總結(jié)一下Ufy28資訊網(wǎng)——每日最新資訊28at.com

  1. details通常和summary配合使用,天然支持展開(kāi)收起的效果
  2. summary前面的黑色三角形是::marker渲染的,可以通過(guò)設(shè)置list-style: none去除
  3. 新增的name屬性可以直接通過(guò)dom.name的方式設(shè)置和獲取
  4. 多個(gè)details元素添加name屬性后會(huì)變成手風(fēng)琴模式,即打開(kāi)其中一個(gè)會(huì)關(guān)閉其他
  5. 目前兼容性還不行,需要polyfill一下
  6. 可以通過(guò)'name' in document.createElement('details')來(lái)檢測(cè)是否支持該特性

本文鏈接:http://www.www897cc.com/showinfo-26-58919-0.html原生Details支持手風(fēng)琴模式了!

聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。郵件:2376512515@qq.com

上一篇: React和Vue的狀態(tài)管理方案有何異同?

下一篇: 歐洲的編程語(yǔ)言三巨頭,只剩下一位了!

標(biāo)簽:
  • 熱門焦點(diǎn)
Top 主站蜘蛛池模板: 西畴县| 淮南市| 资中县| 达拉特旗| 玉溪市| 海晏县| 平湖市| 陇南市| 淅川县| 平阳县| 林周县| 杭锦旗| 怀来县| 上杭县| 麻江县| 通河县| 阳江市| 富民县| 礼泉县| 滦南县| 临泽县| 左权县| 永嘉县| 固安县| 克拉玛依市| 西乌珠穆沁旗| 建宁县| 新巴尔虎右旗| 克东县| 错那县| 阳山县| 大洼县| 韩城市| 德清县| 大新县| 额尔古纳市| 新野县| 蒲城县| 柏乡县| 永康市| 五大连池市|