最近details元素新增了一個(gè)name屬性,如下
圖片
別看這只是一個(gè)普普通通的屬性,這可是帶來(lái)了一個(gè)全新的模式,一起了解一下吧
有些同學(xué)可能從來(lái)沒(méi)有用過(guò)details這個(gè)標(biāo)簽,這里簡(jiǎn)單介紹一下。
details通常和summary配合使用,天然支持展開(kāi)收起的效果。例如
<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>
效果如下
圖片
雖然有些難看,但都是可以通過(guò) CSS 自定義的。
如果想去除這個(gè)“黑色三角”,這個(gè)“黑色三角”其實(shí)是 ::marker生成的,,而這個(gè) ::marker是通過(guò)list-style生成,所以要去除可以這樣
summary{ list-style: none;}/*或者*/summary{ display: flex; /*默認(rèn)是list-style*/}
還支持嵌套,進(jìn)一步美化可以實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)目錄
圖片
以后碰到類似的交互就直接用這個(gè)標(biāo)簽吧,別用JS了
和大多數(shù)表單元素一樣,這個(gè)name也是可以直接設(shè)置和獲取的
details.name; // 獲取details.name = 'xxx'; // 設(shè)置
除此之外,還支持了“手風(fēng)琴”模式。所謂“手風(fēng)琴”模式,相信大家都有所耳聞,就是多個(gè)折疊面板,打開(kāi)其中一個(gè)會(huì)關(guān)閉其他的,比如下方是ant design中的手風(fēng)琴效果
圖片
現(xiàn)在如果用details就可以很輕易的實(shí)現(xiàn)這個(gè)效果,結(jié)構(gòu)如下
<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>
效果如下
圖片
嗯,有點(diǎn)丑...我們美化一下
.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;}
效果如下
圖片
不過(guò)現(xiàn)在每個(gè)折疊面板是互相獨(dú)立的,都可以打開(kāi)或者關(guān)閉。
現(xiàn)在我們想要把這幾個(gè)面板關(guān)聯(lián)起來(lái),就像單選框一樣,用相同的name表示
<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)琴的效果了
圖片
是不是非常簡(jiǎn)單呢?
雖然好用,但是兼容性還不行,需要用一段 JS 來(lái)兜個(gè)底。
首先我們需要判斷一下,也就是檢測(cè)details到底支不支持name這個(gè)特性,這個(gè)很簡(jiǎn)單,我們只需要?jiǎng)?chuàng)建一個(gè)details元素,然后看這個(gè)屬性是否存在就行了,如下
'name' in document.createElement('details');
效果如下
圖片
對(duì)于不支持的瀏覽器,我們就需要通過(guò)監(jiān)聽(tīng)打開(kāi)關(guān)閉狀態(tài)了,直接監(jiān)聽(tīng)click事件
details元素其實(shí)還有一個(gè)toggle事件,也可以用于監(jiān)聽(tīng),但是在這里不太合適,因?yàn)閠oggle是在狀態(tài)改變后才觸發(fā),有點(diǎn)晚了,會(huì)造成閃爍的問(wèn)題
我們需要監(jiān)聽(tīng)所有的details元素,然后根據(jù)name屬性,把其他相同name的都關(guān)閉,具體實(shí)現(xiàn)如下
// 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的效果
圖片
同樣支持多個(gè)分組,每個(gè)分組設(shè)置相同的name就行
圖片
完整代碼可以訪問(wèn)以下鏈接:
總的來(lái)說(shuō)是一個(gè)不痛不癢的新特性,你學(xué)到了,下面總結(jié)一下
本文鏈接: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