css实现收缩列表detail标签使用summary
代码:
<details> <summary>Copyright 2018.</summary> <p> This is title </p> <p>This is content</p> </details>
效果如图:
点击后->
其中summary是标题标签,下面的p标签是内容标签
目前支持浏览器:
IE | 火狐(Firefox) | 谷歌(Chrome) | 欧朋(opera) |
× | 支持 | 支持 | 支持 |
国内其他主流浏览器:支持
details和summary默认focus
outline: -webkit-focus-ring-color auto 5px; outline-color: -webkit-focus-ring-color; outline-style: auto; outline-width: 5px;
我们在css添加代码取消焦点默认样式:
details:focus,summary:focus{outline:none}