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