• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <details>

    版本:HTML5

    HTML<details>元素可创建一个挂件,仅在被切换成展开状态时,它才会显示内含的信息。<summary>元素可为该部件提供概要或者标签。

    浏览器支持

    目前,只有 Chrome 和 Safari 6 支持<details>标签。

    示例

    <details>
        <summary>Details</summary>
        Something small enough to escape casual notice.
    </details>
    <style>
    details {
        border: 1px solid #aaa;
        border-radius: 4px;
        padding: .5em .5em 0;
    }
    
    summary {
        font-weight: bold;
        margin: -.5em -.5em 0;
        padding: .5em;
    }
    
    details[open] {
        padding: .5em;
    }
    
    details[open] summary {
        border-bottom: 1px solid #aaa;
        margin-bottom: .5em;
    }
    
    </style>
    
    Details Something small enough to escape casual notice.

    标签定义及使用说明

    • <details>标签规定了用户可见的或者隐藏的需求的补充细节。<details>标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在<details>标签里边。
    • <details>元素的内容对用户是不可见的,除非设置了open属性。与<summary>标签配合使用可以为<details>定义标题。标题是可见的,用户点击标题时,会显示出<details>
    内容分类流内容,分区根,交互式内容,可触知的内容。
    允许的内容一个<summary>元素,其次是流量内容。
    标签省略开始标签和结束标签都不能省略。
    允许的父元素所有接受流式内容元素
    允许的ARIA角色没有
    DOM接口HTMLDetailsElement

    属性

    此元素仅包含全局属性。

    此布尔值属性指示详细信息(即<details>元素的内容)当前是否可见。默认值为false,表示细节不可见。

    事件

    除了HTML元素支持的常见事件之外,该<details>元素还支持toggle事件,<details>只要事件的状态在打开和关闭之间发生变化,该事件就会分派给该元素。它是在状态更改后发送的,尽管如果状态在浏览器可以分派事件之前多次更改,事件会合并在一起,因此只发送一个。

    您可以侦听toggle事件以检测小部件何时更改状态:

    details.addeventlistener("toggle", event => {
      if (details.open) {
        /* the element was toggled open */
      }
     else {
        /* the element was toggled closed */
      }
    }
    );

    HTML 4.01 与 HTML 5 之间的差异

    <details>标签是 HTML 5 中的新标签。

    全局属性

    <details>标签支持HTML 的全局属性。

    事件属性

    <details>标签支持HTML 的事件属性。

    实例

    使用<details>元素:

    <details>
    <summary>copyright 1999-2011.</summary>
    <p>- by refsnes data. all rights reserved.</p>
    <p>all content and graphics on this web site are the property of the company refsnes data.</p>
    </details>

    例子

    本示例显示了一个<details>没有提供摘要的元素。

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

    本示例通过使用<summary>inside元素向上述示例添加摘要<details>,如下所示:

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

    <details>以打开状态启动该框,请添加Boolean open属性:

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

    应用一些CSS来定制显示框的外观。

    //CSS
    
    
    details {
      font: 16px "open sans", "arial", sans-serif;
      width: 620px;
    }
    
    details > summary {
      padding: 2px 6px;
      width: 15em;
      background-color: #ddd;
      border: none;
      box-shadow: 3px 3px 4px black;
    }
    
    details > p {
      border-radius: 0 0 10px 10px;
      background-color: #ddd;
      padding: 2px 6px;
      margin: 0;
      box-shadow: 3px 3px 4px black;
    }
    
    
    //HTM
    
    <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>

    自定义自带部件的样式

    自带的三角形可以自定义,但并没有得到广泛支持。由于该元素是标准化的,因此在实验性实施阶段,浏览器如何支持此自定义项有所不同,我们不得不暂时使用多种方法。

    <summary>元素支持list-style缩写属性或者完全属性,比如list-style-type,可以使用它们任意改变三角(通常是使用list-style-image)。例如,我们可以使用list-style: none移除三角形。

    Chrome尚不支持此功能,因此我们还需要使用其非标准::-webkit-details-marker伪元素来自定义。

    details {
      font: 16px "open sans", "arial", sans-serif;
      width: 620px;
    }
    
    details > summary {
      padding: 2px 6px;
      width: 15em;
      background-color: #ddd;
      border: none;
      box-shadow: 3px 3px 4px black;
      list-style: none;
    }
    
    details > summary::-webkit-details-marker {
      display: none;
    }
    
    details > p {
      border-radius: 0 0 10px 10px;
      background-color: #ddd;
      padding: 2px 6px;
      margin: 0;
      box-shadow: 3px 3px 4px black;
    }
    
    <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>
    
    system requirements

    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.

    上篇:<menu>

    下篇:<summary>