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}

posted @ 2018-03-26 09:37  一只京大  阅读(696)  评论(0编辑  收藏  举报