HTML5 之 <details>、<dialog> 和 <summary>

参看：

使用<details>和<summary>元素

三个不常用的HTML元素

<details>

details顾名思义，就是显示细节的，点击展开，再次点击关闭显示。

当details展开时，会在标签上添加一个属性open=“open"'

当然也可以默认带有open属性的，那么就是默认展开显示

  <details>
    <p>这是一段文字1</p>
  </details>
  <details open>
    <p>这是一段文字2</p>
  </details>

Summary

Summary就是摘要，它一般和details配合使用，示例如下：

  <details>
    <summary>摘要文字</summary>
    <p>这是一段文字1</p>
  </details>
  <hr>
  <details open>
    <summary>摘要文字</summary>
    <p>这是一段文字2</p>
  </details>

**多级嵌套使用**

  <details>
    <summary>摘要文字1</summary>
    <p>这是一段文字1</p>
    <details open>
      <summary>摘要文字2</summary>
      <p>这是一段文字2</p>
    </details>
  </details>

你可以发现，现在标签有默认样式，这一搬不是我们所需要的，那么你可以自定义CSS样式：

/* 设置打开时的样式 */
details[open] {
    /* 在这里添加你的样式 */
    background-color: #ddd;
}

/* 设置打开时的样式 
    Webkit内核的浏览器使用伪元素来解决这个问题：::-webkit-details-marker。通过这个伪元素，我们可以定制小三角的前景色，背景色和尺寸大小：*/
summary::-webkit-details-marker {
    color: #fff;
    background-color: #000;
}

/* 但是，直接通过::-webkit-details-marker伪元素来修改小三角的样式是行不通的。目前，我们只能通过::before和::after伪元素来替换它们。 */
summary::-webkit-details-marker {
    display: none;
}
summary:before {
    content: "\2714"; /* the new icon */
    color: #696f7c;
    margin-right: 5px;
}     

<dialog>

该标签只有一个open属性，用来定义对话框是否可见(默认为不可见)

<button>显示对话框</button>
<dialog>我是对话框的内容</dialog>
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oDia = document.getElementsByTagName('dialog')[0]; 
oBtn.onclick = function(){
  console.log(oDia.getAttribute('open'))
  if(!oDia.getAttribute('open')){
    oDia.setAttribute('open','open');
    this.innerHTML ='隐藏文本框';
  }else{
    oDia.removeAttribute('open');
    this.innerHTML = '显示文本框';
  }
}
</script>