• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

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

    发布者: Error | 发布时间: 2025-6-14 15:04| 查看数: 78| 评论数: 0|帖子模式

    details 标签提供了一种替代 JavaScript 的方法，它主要是提供了一个展开/收缩区域。details 标签中可以使用 summary 标签从属于 details 标签，单击 summary 标签中的内容文字时，details 标签中的其他所有从属元素将会展开或收缩。
    语法如下：
    1. <details>
    2.     <summary>标题</summary>
    3.     <p>文本内容</p>
    4. </details>
    复制代码
    details 标签可以可选地接受 open 属性，以确保在页面载入时该元素是展开的。
    1. <details open>
    2. </details>
    复制代码
    【实例】使用<details>标签实现展开/收缩信息。
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="author" content="脚本之家">
    6.     <title>HTML5使用details标签：展开/收缩信息</title>
    7.     <style type="text/css">
    8.         details {
    9.             overflow: hidden;
    10.             background: #e3e3e3;
    11.             margin-bottom: 10px;
    12.             display: block;
    13.         }
    14.         details summary {
    15.             cursor: pointer;
    16.             padding: 10px;
    17.         }
    18.     </style>
    19. </head>
    20. <body>
    21.   <details open>
    22.   <summary>脚本之家介绍</summary>
    23.   <p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p>
    24.   <p>https://www.jb51.net</p>
    25. </details>
    26. </body>
    27. </html>
    复制代码
    执行结果：

    open 属性
    1. open
    复制代码
    其值得类型为
    1. Boolean
    复制代码
    ,作用为控制元素的显示/隐藏
    因为details带了open属性，所以默认就是打开状态，如果不加就是隐藏状态
    收缩效果：

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

    设置样式
    1.     details summary {
    2.       /* 文字从右到左 */
    3.       direction: rtl;
    4.       /* 容器缩小到文字大小 */
    5.       width: fit-content;
    6.     }
    7.     /* 选中三角符号 */
    8.     details ::marker {
    9.       direction: ltr;
    10.       color: gray;
    11.     }
    复制代码
    1.   <details open>
    2.     <summary>
    3.       文章概要
    4.     </summary>
    5.     <div>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</div>
    6.   </details>
    复制代码
    效果图

    替换 UI
    1. details summary {
    2.       /* 容器缩小到文字大小 */
    3.       width: fit-content;
    4.       height: 20px;
    5.           line-height: 20px;
    6.     }
    7.     /* 隐藏原始三角 */
    8.     details ::marker {
    9.       font-size: 0;
    10.     }
    11.     /* 自定义三角 */
    12.     summary::after {
    13.       content: '▶';
    14.       margin-left: .5ch;
    15.       position: absolute;
    16.       transition: transform .2s;
    17.     }
    18.     details:not([open]) summary::after {
    19.       transform: rotate(90deg);
    20.     }
    复制代码
    1. <details open>
    2.     <summary>
    3.       文章概要
    4.     </summary>
    5.     <div>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</div>
    6. </details>
    复制代码
    效果如下:

    实际交互

    无JS实现点击显示悬浮菜单，自定义下拉框等效果
    1.   nav {
    2.       background: #eee;
    3.       padding-left: 40px;
    4.     }
    5.     details summary {
    6.       width: fit-content;
    7.       padding: 5px 28px;
    8.       height: 28px;
    9.       line-height: 28px;
    10.     }
    11.     /* 打开或悬停样式 */
    12.     [open] summary,
    13.     details summary:hover {
    14.       background-color: #fff;
    15.       box-shadow: inset 1px 0 #eee, inset -1px 0 #eee;
    16.     }
    17.     /* 隐藏原始三角 */
    18.     details ::marker {
    19.       font-size: 0;
    20.     }
    21.     /* 自定义三角 */
    22.     summary::after {
    23.       content: '▼';
    24.       margin-left: .3ch;
    25.       color: grey;
    26.       position: absolute;
    27.       transition: transform .2s;
    28.     }
    29.     details:not([open]) summary::after {
    30.       transform: rotate(-90deg);
    31.     }
    32.     /* 打开开启全屏遮罩 */
    33.     [open] summary::before {
    34.       content: '';
    35.       position: fixed;
    36.       top: 0;
    37.       bottom: 0;
    38.       left: 0;
    39.       right: 0;
    40.     }
    41.     .box {
    42.       position: absolute;
    43.       min-width: 120px;
    44.       border: 1px solid #ddd;
    45.       border-top: 0;
    46.       box-sizing: border-box;
    47.     }
    48.    .box div{
    49.      padding: 8px 10px;
    50.      cursor: pointer;
    51.    }
    52.     .box div:hover{
    53.       background: #eee;
    54.     }
    55.     .box div sup{
    56.       display: inline-block;
    57.       width: 18px;
    58.       height: 18px;
    59.       text-align: center;
    60.       line-height: 18px;
    61.       border-radius: 50%;
    62.       color: #fff;
    63.       background: #d50000;
    64.     }
    复制代码
    html5代码
    1. <nav>
    2.     <details open>
    3.       <summary>
    4.         我的消息
    5.       </summary>
    6.       <div class="box">
    7.         <div>我的私信<sup>12</sup></div>
    8.         <div>我的回答</div>
    9.         <div>我的关注</div>
    10.       </div>
    11.     </details>
    12.   </nav>
    复制代码
    效果如下:

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

    来源：https://www.jb51.net/html5/959483.html
    免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表