HTML5使用details標(biāo)簽：展開(kāi)/收縮信息

發(fā)布時(shí)間：2024-11-03 12:59:27 作者：佚名

最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用，這個(gè)不用js即可實(shí)現(xiàn)展開(kāi)/收縮信息，很方便用來(lái)讓用戶(hù)先才答案，然后下面點(diǎn)擊再給出答案的效果，這里就為大家簡(jiǎn)單介紹一下，支持html5的瀏覽器一般都支持

details 標(biāo)簽提供了一種替代 JavaScript 的方法，它主要是提供了一個(gè)展開(kāi)/收縮區(qū)域。details 標(biāo)簽中可以使用 summary 標(biāo)簽從屬于 details 標(biāo)簽，單擊 summary 標(biāo)簽中的內(nèi)容文字時(shí)，details 標(biāo)簽中的其他所有從屬元素將會(huì)展開(kāi)或收縮。

語(yǔ)法如下：

<details>
    <summary>標(biāo)題</summary>
    <p>文本內(nèi)容</p>
</details>

details 標(biāo)簽可以可選地接受 open 屬性，以確保在頁(yè)面載入時(shí)該元素是展開(kāi)的。

<details open>
</details>

【實(shí)例】使用<details>標(biāo)簽實(shí)現(xiàn)展開(kāi)/收縮信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="腳本之家">
    <title>HTML5使用details標(biāo)簽：展開(kāi)/收縮信息</title>
    <style type="text/css">
        details {
            overflow: hidden;
            background: #e3e3e3;
            margin-bottom: 10px;
            display: block;
        }
        details summary {
            cursor: pointer;
            padding: 10px;
        }
    </style>
</head>
<body>
  <details open>
  <summary>腳本之家介紹</summary>
  <p>腳本之家是國(guó)內(nèi)專(zhuān)業(yè)的網(wǎng)站建設(shè)資源、腳本編程學(xué)習(xí)類(lèi)網(wǎng)站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網(wǎng)頁(yè)制作、網(wǎng)絡(luò)編程、網(wǎng)站建設(shè)等編程資料。</p>
  <p>http://www.dbjr.com.cn</p>
</details>
</body>
</html>

執(zhí)行結(jié)果：

open 屬性

open 其值得類(lèi)型為 Boolean ,作用為控制元素的顯示/隱藏

因?yàn)閐etails帶了open屬性，所以默認(rèn)就是打開(kāi)狀態(tài)，如果不加就是隱藏狀態(tài)

收縮效果：

當(dāng)然你也可以自定義 UI，默認(rèn)的確實(shí)不好看

設(shè)置樣式

    details summary {
      /* 文字從右到左 */
      direction: rtl;
      /* 容器縮小到文字大小 */
      width: fit-content;
    }
    /* 選中三角符號(hào) */
    details ::marker {
      direction: ltr;
      color: gray;
    }

  <details open>
    <summary>
      文章概要
    </summary>
    <div>文章內(nèi)容文章內(nèi)容文章內(nèi)容文章內(nèi)容文章內(nèi)容文章內(nèi)容文章內(nèi)容文章內(nèi)容</div>
  </details>

效果圖

替換 UI

 details summary {
      /* 容器縮小到文字大小 */
      width: fit-content;
      height: 20px;
	  line-height: 20px;
    }
    /* 隱藏原始三角 */
    details ::marker {
      font-size: 0;
    }
    /* 自定義三角 */
    summary::after {
      content: '?';
      margin-left: .5ch;
      position: absolute;
      transition: transform .2s;
    }
    details:not([open]) summary::after {
      transform: rotate(90deg);
    }

<details open>
    <summary>
      文章概要
    </summary>
    <div>文章內(nèi)容文章內(nèi)容文章內(nèi)容文章內(nèi)容文章內(nèi)容文章內(nèi)容文章內(nèi)容文章內(nèi)容</div>
 </details>

效果如下:

實(shí)際交互

無(wú)JS實(shí)現(xiàn)點(diǎn)擊顯示懸浮菜單，自定義下拉框等效果

  nav {
      background: #eee;
      padding-left: 40px;
    }
    details summary {
      width: fit-content;
      padding: 5px 28px;
      height: 28px;
      line-height: 28px;
    }
    /* 打開(kāi)或懸停樣式 */
    [open] summary,
    details summary:hover {
      background-color: #fff;
      box-shadow: inset 1px 0 #eee, inset -1px 0 #eee;
    }
    /* 隱藏原始三角 */
    details ::marker {
      font-size: 0;
    }
    /* 自定義三角 */
    summary::after {
      content: '▼';
      margin-left: .3ch;
      color: grey;
      position: absolute;
      transition: transform .2s;
    }
    details:not([open]) summary::after {
      transform: rotate(-90deg);
    }
    /* 打開(kāi)開(kāi)啟全屏遮罩 */
    [open] summary::before {
      content: '';
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    .box {
      position: absolute;
      min-width: 120px;
      border: 1px solid #ddd;
      border-top: 0;
      box-sizing: border-box;
    }
   .box div{
     padding: 8px 10px;
     cursor: pointer;
   }
    .box div:hover{
      background: #eee;
    }
    .box div sup{
      display: inline-block;
      width: 18px;
      height: 18px;
      text-align: center;
      line-height: 18px;
      border-radius: 50%;
      color: #fff;
      background: #d50000;
    }

html5代碼

 <nav>
    <details open>
      <summary>
        我的消息
      </summary>
      <div class="box">
        <div>我的私信<sup>12</sup></div>
        <div>我的回答</div>
        <div>我的關(guān)注</div>
      </div>
    </details>
  </nav>

效果如下: