html中的details与summary

 details的效果就像我们经常见到的“手风琴”样式，可以自由的折叠和展开，看几个例子。details可以使用在body元素内的任何地方。

    1.details单独使用

    <details>
         <p>菜单项1</p>
		 <p>菜单项2</p>
		 <p>菜单项3</p>
    </details>

效果如图，默认是折叠的：

    2.怎么让details默认是打开的呢,加上open属性即可？

  <details open>
         <p>菜单项1</p>
		 <p>菜单项2</p>
		 <p>菜单项3</p>
    </details>

效果图：

3.details黑色的小三角右边的文字默认就是“详细信息”，怎么更改呢？这时候就需要使用到summary标签了：

  <details open>
	<summary>全部功能</summary>
	 <p>菜单项1</p>
	 <p>菜单项2</p>
	 <p>菜单项3</p>
   </details>

如下:

4.另外，比如我一个菜单下面还有子菜单，怎么实现呢？不用担心，details还支持嵌套使用：

<details open>
	<summary>全部功能</summary>
	 <p>菜单项1</p>
	 <p>菜单项2</p>
	 <details open>
		<summary>用户管理</summary>
		 <p>用户查询</p>
		 <p>用户赋权</p>
		 <p>用户组别管理</p>
	   </details>
   </details>

结果如图：

<details open>

<summary>全部功能</summary>

 <p>菜单项1</p>

 <p>菜单项2</p>

 <details open>

<summary>用户管理</summary>

 <p>用户查询</p>

 <p>用户赋权</p>

 <p>用户组别管理</p>

   </details>

   </details>

好了，这两个标签都懂了吧。