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

當前位置:首頁 > 科技  > 軟件

原生Details支持手風琴模式了!

來源: 責編: 時間:2024-01-08 17:10:55 210觀看
導讀最近details元素新增了一個name屬性,如下圖片別看這只是一個普普通通的屬性,這可是帶來了一個全新的模式,一起了解一下吧一、快速了解 details有些同學可能從來沒有用過details這個標簽,這里簡單介紹一下。details通常和s

最近details元素新增了一個name屬性,如下7ou28資訊網——每日最新資訊28at.com

圖片圖片7ou28資訊網——每日最新資訊28at.com

別看這只是一個普普通通的屬性,這可是帶來了一個全新的模式,一起了解一下吧7ou28資訊網——每日最新資訊28at.com

一、快速了解 details

有些同學可能從來沒有用過details這個標簽,這里簡單介紹一下。7ou28資訊網——每日最新資訊28at.com

details通常和summary配合使用,天然支持展開收起的效果。例如7ou28資訊網——每日最新資訊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>

效果如下7ou28資訊網——每日最新資訊28at.com

圖片圖片7ou28資訊網——每日最新資訊28at.com

雖然有些難看,但都是可以通過 CSS 自定義的。7ou28資訊網——每日最新資訊28at.com

如果想去除這個“黑色三角”,這個“黑色三角”其實是 ::marker生成的,,而這個 ::marker是通過list-style生成,所以要去除可以這樣7ou28資訊網——每日最新資訊28at.com

summary{  list-style: none;}/*或者*/summary{  display: flex; /*默認是list-style*/}

還支持嵌套,進一步美化可以實現(xiàn)樹形結構目錄7ou28資訊網——每日最新資訊28at.com

圖片圖片7ou28資訊網——每日最新資訊28at.com

以后碰到類似的交互就直接用這個標簽吧,別用JS了7ou28資訊網——每日最新資訊28at.com

二、新增的 name 屬性

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

details.name; // 獲取details.name = 'xxx'; // 設置

除此之外,還支持了“手風琴”模式。所謂“手風琴”模式,相信大家都有所耳聞,就是多個折疊面板,打開其中一個會關閉其他的,比如下方是ant design中的手風琴效果7ou28資訊網——每日最新資訊28at.com

圖片圖片7ou28資訊網——每日最新資訊28at.com

現(xiàn)在如果用details就可以很輕易的實現(xiàn)這個效果,結構如下7ou28資訊網——每日最新資訊28at.com

<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>

效果如下7ou28資訊網——每日最新資訊28at.com

圖片圖片7ou28資訊網——每日最新資訊28at.com

嗯,有點丑...我們美化一下7ou28資訊網——每日最新資訊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;}

效果如下7ou28資訊網——每日最新資訊28at.com

圖片圖片7ou28資訊網——每日最新資訊28at.com

不過現(xiàn)在每個折疊面板是互相獨立的,都可以打開或者關閉。7ou28資訊網——每日最新資訊28at.com

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

<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>

這樣就是實現(xiàn)了手風琴的效果了7ou28資訊網——每日最新資訊28at.com

圖片圖片7ou28資訊網——每日最新資訊28at.com

是不是非常簡單呢?7ou28資訊網——每日最新資訊28at.com

三、還是需要 polyfill 一下

雖然好用,但是兼容性還不行,需要用一段 JS 來兜個底。7ou28資訊網——每日最新資訊28at.com

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

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

效果如下7ou28資訊網——每日最新資訊28at.com

圖片圖片7ou28資訊網——每日最新資訊28at.com

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

details元素其實還有一個toggle事件,也可以用于監(jiān)聽,但是在這里不太合適,因為toggle是在狀態(tài)改變后才觸發(fā),有點晚了,會造成閃爍的問題7ou28資訊網——每日最新資訊28at.com


7ou28資訊網——每日最新資訊28at.com

我們需要監(jiān)聽所有的details元素,然后根據(jù)name屬性,把其他相同name的都關閉,具體實現(xiàn)如下7ou28資訊網——每日最新資訊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)在來看Firefox的效果7ou28資訊網——每日最新資訊28at.com

圖片圖片7ou28資訊網——每日最新資訊28at.com

同樣支持多個分組,每個分組設置相同的name就行7ou28資訊網——每日最新資訊28at.com

圖片圖片7ou28資訊網——每日最新資訊28at.com

完整代碼可以訪問以下鏈接:7ou28資訊網——每日最新資訊28at.com

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

四、總結一下

總的來說是一個不痛不癢的新特性,你學到了,下面總結一下7ou28資訊網——每日最新資訊28at.com

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

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

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

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

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

標簽:
  • 熱門焦點
  • SpringBoot中使用Cache提升接口性能詳解

    環(huán)境:springboot2.3.12.RELEASE + JSR107 + Ehcache + JPASpring 框架從 3.1 開始,對 Spring 應用程序提供了透明式添加緩存的支持。和事務支持一樣,抽象緩存允許一致地使用各
  • 三言兩語說透柯里化和反柯里化

    JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是兩種很有用的技術,可以幫助我們寫出更加優(yōu)雅、泛用的函數(shù)。本文將首先介紹柯里化和反柯里化的概念、實現(xiàn)原理和應用
  • 如何使用JavaScript創(chuàng)建一只圖像放大鏡?

    譯者 | 布加迪審校 | 重樓如果您曾經瀏覽過購物網站,可能遇到過圖像放大功能。它可以讓您放大圖像的特定區(qū)域,以便瀏覽。結合這個小小的重要功能可以大大改善您網站的用戶體驗
  • 為什么你不應該使用Div作為可點擊元素

    按鈕是為任何網絡應用程序提供交互性的最常見方式。但我們經常傾向于使用其他HTML元素,如 div span 等作為 clickable 元素。但通過這樣做,我們錯過了許多內置瀏覽器的功能。
  • 一條抖音4億人圍觀 ! 這家MCN比無憂傳媒還野

    作者:Hiu 來源:互聯(lián)網品牌官01 擦邊少女空降熱搜,幕后推手曝光被網友譽為&ldquo;純欲天花板&rdquo;的女網紅井川里予,近期因為一組哥特風照片登上熱搜,引發(fā)了一場互聯(lián)網世界關于
  • 造車兩年股價跌六成,小米的估值邏輯變了嗎?

    如果從小米官宣造車后的首個交易日起持有小米集團的股票,那么截至2023年上半年最后一個交易日,投資者將浮虧59.16%,同區(qū)間的恒生科技指數(shù)跌幅為52.78%
  • iQOO 11S新品發(fā)布會

    iQOO將在7月4日19:00舉行新品發(fā)布會,推出杭州亞運會電競賽事官方用機iQOO 11S。
  • 機構稱Q2全球智能手機出貨量同比下滑11% 蘋果份額依舊第2

    7月20日消息,據(jù)外媒報道,研究機構的報告顯示,由于需求下滑,今年二季度全球智能手機的出貨量,同比下滑了11%,三星、蘋果等主要廠商的銷量,較去年同期均有下
  • 2022爆款:ROG魔霸6 冰川散熱系統(tǒng)持續(xù)護航

    喜逢開學季,各大商家開始推出自己的新產品,進行打折促銷活動。對于忠實的端游愛好者來說,能夠擁有一款夢寐以求的筆記本電腦是一件十分開心的事。但是現(xiàn)在的
Top 主站蜘蛛池模板: 新平| 丰县| 德惠市| 贡觉县| 康乐县| 西华县| 长海县| 浮山县| 马关县| 饶河县| 广水市| 龙岩市| 满城县| 交城县| 博客| 阿荣旗| 潼南县| 台江县| 同仁县| 西乡县| 大冶市| 和田市| 石屏县| 东乡县| 电白县| 汉中市| 班戈县| 河池市| 万荣县| 青神县| 肥乡县| 佳木斯市| 四平市| 闵行区| 清新县| 广元市| 兰考县| 武宁县| 泸西县| 漠河县| 山丹县|