本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > html5 >

收藏
分享到

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

html5 来源：互联网 作者：佚名 发布时间：2024-11-09 11:46:11 人浏览
摘要

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

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

语法如下：

1

2

3

4

<details>

    <summary>标题</summary>

    <p>文本内容</p>

</details>

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

1

2

<details open>

</details>

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!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，默认的确实不好看

设置样式

1

2

3

4

5

6

7

8

9

10

11

details summary {

  /* 文字从右到左 */

  direction: rtl;

  /* 容器缩小到文字大小 */

  width: fit-content;

}

/* 选中三角符号 */

details ::marker {

  direction: ltr;

  color: gray;

}

1

2

3

4

5

6

<details open>

  <summary>

    文章概要

  </summary>

  <div>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</div>

</details>

效果图

替换 UI

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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

   }

1

2

3

4

5

6

<details open>

    <summary>

      文章概要

    </summary>

    <div>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</div>

 </details>

效果如下:

实际交互

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

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

1

2

3

4

5

6

7

8

9

10

11

12

<nav>

   <details open>

     <summary>

       我的消息

     </summary>

     <div class="box">

       <div>我的私信<sup>12</sup></div>

       <div>我的回答</div>

       <div>我的关注</div>

     </div>

   </details>

 </nav>

效果如下:
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • HTML5 details标签的基础知识
    定义和用法 details标签规定用户可以根据需要打开和关闭的其他详细信息。 details标签通常用于创建用户可以打开和关闭的交互式小部件。默

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

    HTML5使用details标签：展开/收缩信息
    details 标签提供了一种替代JavaScript的方法，它主要是提供了一个展开/收缩区域。details 标签中可以使用 summary 标签从属于details 标签，单击
  • HTML5实现本地摄像头拍照与照片上传的方法介绍
    HTML5通过input type=file标签及其capture属性，允许网页调用本地摄像头进行拍照，提升了用户交互体验。本文将详细介绍如何使用HTML5和JavaScri

  • HTML5元素定位的介绍

    HTML5元素定位的介绍
    1.元素定位 为了实现网页整体布局，我们先要知道，一个元素，是如何定位到页面上的某个位置的，这就是元素定位。 元素定位有四种，可

  • html5浏览器中实现高德地图定位功能(推荐)

    html5浏览器中实现高德地图定位功能(推荐)
    HTML5是当前Web开发中最常用的技术之一，而地图应用又是其中一个非常常见的需求。高德地图是国内最受欢迎的地图服务提供商之一，他们提
  • 使用HTML5新增的表单元素来增强表单功能介绍
    随着HTML5标准的推广和普及，网页表单的设计也得到了极大的改进。HTML5引入了许多新的表单控件和属性，不仅提升了用户体验，还简化了前
  • HTML5中Checkbox标签介绍
    在HTML5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本文将深入解析Checkbox标签的基本属性、样式自
  • HTML5中使用Noto Sans CJK字体的步骤
    在HTML5中使用Noto Sans CJK字体的详细指南 在网页设计中，字体选择对用户体验至关重要。Noto Sans CJK是 Google 提供的一个优秀的免费字体系列，

  • HTML5表单的自动验证、取消验证、自定义错误信息

    HTML5表单的自动验证、取消验证、自定义错误信息
    1、自动验证 通过在元素中使用属性的方法，该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属

  • Html5播放hls格式的视频代码

    Html5播放hls格式的视频代码
    一、什么情况下需要播放 当前端需要嵌入设备视频，比如用到魔镜、萤石云、海康威视等平台，怎么能将视频地址在前端页面中播放呢，这
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计