鴻蒙OS 4.0公測機型公布：甚至連nova6都支持
華為全新的HarmonyOS 4.0操作系統將于今天下午正式登場，官方在發布會之前也已經正式給出了可升級的機型產品，這意味著這些機型會率先支持升級享用。這次的HarmonyOS 4.0支持
最近details元素新增了一個name屬性，如下
圖片
別看這只是一個普普通通的屬性，這可是帶來了一個全新的模式，一起了解一下吧
有些同學可能從來沒有用過details這個標簽，這里簡單介紹一下。
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 自定義的。
如果想去除這個“黑色三角”，這個“黑色三角”其實是 ::marker生成的，，而這個 ::marker是通過list-style生成，所以要去除可以這樣
summary{ list-style: none;}/*或者*/summary{ display: flex; /*默認是list-style*/}還支持嵌套，進一步美化可以實現樹形結構目錄
圖片
以后碰到類似的交互就直接用這個標簽吧，別用JS了
和大多數表單元素一樣，這個name也是可以直接設置和獲取的
details.name; // 獲取details.name = 'xxx'; // 設置除此之外，還支持了“手風琴”模式。所謂“手風琴”模式，相信大家都有所耳聞，就是多個折疊面板，打開其中一個會關閉其他的，比如下方是ant design中的手風琴效果
圖片
現在如果用details就可以很輕易的實現這個效果，結構如下
<div class="con"> <details> <summary>歡迎</summary> <p>最近 details元素新增了一個name屬性</p> </details> <details> <summary>關注</summary> <p>別看這只是一個普普通通的屬性，這可是帶來了一個全新的模式，一起了解一下吧</p> </details> <details> <summary>前端</summary> <p>details通常和summary配合使用，天然支持展開收起的效果</p> </details> <details> <summary>偵探</summary> <p>雖然有些難看，但都是可以通過 CSS 自定義的</p> </details></div>效果如下
圖片
嗯，有點丑...我們美化一下
.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;}效果如下
圖片
不過現在每個折疊面板是互相獨立的，都可以打開或者關閉。
現在我們想要把這幾個面板關聯起來，就像單選框一樣，用相同的name表示
<div class="con"> <details name="a"> <summary>歡迎</summary> <p>最近 details元素新增了一個name屬性</p> </details> <details name="a"> <summary>關注</summary> <p>別看這只是一個普普通通的屬性，這可是帶來了一個全新的模式，一起了解一下吧</p> </details> <details name="a"> <summary>前端</summary> <p>details通常和summary配合使用，天然支持展開收起的效果</p> </details> <details name="a"> <summary>偵探</summary> <p>雖然有些難看，但都是可以通過 CSS 自定義的</p> </details></div>這樣就是實現了手風琴的效果了
圖片
是不是非常簡單呢？
雖然好用，但是兼容性還不行，需要用一段 JS 來兜個底。
首先我們需要判斷一下，也就是檢測details到底支不支持name這個特性，這個很簡單，我們只需要創建一個details元素，然后看這個屬性是否存在就行了，如下
'name' in document.createElement('details');效果如下
圖片
對于不支持的瀏覽器，我們就需要通過監聽打開關閉狀態了，直接監聽click事件
details元素其實還有一個toggle事件，也可以用于監聽，但是在這里不太合適，因為toggle是在狀態改變后才觸發，有點晚了，會造成閃爍的問題
我們需要監聽所有的details元素，然后根據name屬性，把其他相同name的都關閉，具體實現如下
// 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 }) } }) })}我們現在來看Firefox的效果
圖片
同樣支持多個分組，每個分組設置相同的name就行
圖片
完整代碼可以訪問以下鏈接：
總的來說是一個不痛不癢的新特性，你學到了，下面總結一下
本文鏈接：http://www.www897cc.com/showinfo-26-58919-0.html原生Details支持手風琴模式了！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
下一篇： 歐洲的編程語言三巨頭，只剩下一位了！
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號