HTML5使用details标签：展开/收缩信息

发布时间：2024-11-03 12:59:27 作者：佚名

最近看一些技术网站发现了details 标签的妙用，这个不用js即可实现展开/收缩信息，很方便用来让用户先才答案，然后下面点击再给出答案的效果，这里就为大家简单介绍一下，支持html5的浏览器一般都支持

details 标签提供了一种替代 JavaScript 的方法，它主要是提供了一个展开/收缩区域。details 标签中可以使用 summary 标签从属于 details 标签，单击 summary 标签中的内容文字时，details 标签中的其他所有从属元素将会展开或收缩。

语法如下：

<details>
    <summary>标题</summary>
    <p>文本内容</p>
</details>

details 标签可以可选地接受 open 属性，以确保在页面载入时该元素是展开的。

<details open>
</details>

【实例】使用<details>标签实现展开/收缩信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="脚本之家">
    <title>HTML5使用details标签：展开/收缩信息</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>脚本之家是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p>
  <p>https://www.jb51.net</p>
</details>
</body>
</html>

执行结果：

open 属性

open 其值得类型为 Boolean ,作用为控制元素的显示/隐藏

因为details带了open属性，所以默认就是打开状态，如果不加就是隐藏状态

收缩效果：

当然你也可以自定义 UI，默认的确实不好看

设置样式

    details summary {
      /* 文字从右到左 */
      direction: rtl;
      /* 容器缩小到文字大小 */
      width: fit-content;
    }
    /* 选中三角符号 */
    details ::marker {
      direction: ltr;
      color: gray;
    }

  <details open>
    <summary>
      文章概要
    </summary>
    <div>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</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>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</div>
 </details>

效果如下:

实际交互

无JS实现点击显示悬浮菜单，自定义下拉框等效果

  nav {
      background: #eee;
      padding-left: 40px;
    }
    details summary {
      width: fit-content;
      padding: 5px 28px;
      height: 28px;
      line-height: 28px;
    }
    /* 打开或悬停样式 */
    [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);
    }
    /* 打开开启全屏遮罩 */
    [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>我的关注</div>
      </div>
    </details>
  </nav>

效果如下:

到此这篇关于HTML5使用details标签：展开/收缩信息的文章就介绍到这了,更多相关HTML5展开/收缩信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

Tag：HTML5 展开收缩

HTML5使用details标签：展开/收缩信息
最近看一些技术网站发现了details 标签的妙用，这个不用js即可实现展开/收缩信息，很方便用来让用户先才答案，然后下面点击再给出答案的效果，这里就为大家简单介绍一下，
2024-11-03
HTML5 details标签的基础知识
本文介绍了HTML中的details标签，包括其在实例中的应用，浏览器的支持情况，定义与用法,此标签在HTML5中新增，用于描述文档或文档部分的细节,默认情况下，详情是隐藏的，用
2024-11-03
使用HTML5新增的表单元素来增强表单功能
HTML5标准的推广极大改进了网页表单设计,引入新的表单控件和属性,提升用户体验,简化前端开发,本文详细介绍HTML5新增表单元素,展示如何利用这些元素增强表单功能,如数据验证
2024-10-22
html5浏览器中实现高德地图定位功能(推荐)
本文介绍如何在HTML5页面中使用高德地图API实现地图定位功能,首先需要在HTML中引入高德地图API,然后创建一个地图容器,还可以通过点击地图来手动更新位置,这一过程不仅适用
2024-10-21
详解HTML5元素定位
在HTML5中,元素定位是通过设置position属性实现的,相对定位基于元素自身位置调整,绝对定位以最近的已定位父元素为参考,固定定位则相对于浏览器窗口固定位置,z-index属性可
2024-10-21
HTML5实现本地摄像头拍照与照片上传的方法
本文详细介绍了如何使用HTML5和JavaScript构建调用本地摄像头拍照并上传照片的网页应用,内容涵盖从实现摄像头功能,提供了一套完整的操作指南和技术路线,使读者能够在实际项
2024-10-21
HTML5中Checkbox标签详解
本文详细介绍了Checkbox的基础属性、样式自定义及其应用场景,Checkbox通过<input>元素实现,样式自定义可以通过隐藏原始Checkbox、使用伪元素、JavaScript来实现,Chec
2024-10-16
HTML5表单的自动验证、取消验证、自定义错误信息的操作
本文介绍了HTML5中表单的自动验证、取消验证、自定义错误信息等功能,通过required、pattern、min、max和step属性,可以实现对表单输入的自动检查，novalidate和formnovalida
2024-09-23
HTML5中使用Noto Sans CJK字体的详细步骤
在HTML5项目中使用NotoSansCJK字体能提升用户体验,本文介绍了通过GoogleFonts在线加载和本地托管两种方法,在线加载无需下载,通过GoogleFonts链接快速引入，适合离线使用或
2024-09-23
Html5播放hls格式的视频示例代码
HLS是一种基于HTTP协议的流媒体传输协议，它的出现使得视频的传输更加稳定和可靠，本文给大家介绍Html5如何播放hls格式的视频，感兴趣的朋友一起看看吧
2024-08-19