HTML5"Summary"介绍

2017年04月11日，星期二 
							<details>
								    <summary>
									        <a href="">折叠</a>
								    </summary>
								    <ul>
									        <li><a href="">展开</a></li>
									        <li><a href="">展开</a></li>
									        <li><a href="">展开</a></li>
									        <li><a href="">展开</a></li>
									        <li><a href="">展开</a></li>
								    </ul>
							</details>

效果就是下面这个样子

折叠

但是这样就够了吗？显然是不够的，在我们做项目的过程中可能会要求的是别的颜色，这时候就需要我们自定义summary了

/* 去掉summary的三角形 */ .menu summary::-webkit-details-marker { display:none; } .menu[open] summary:before{     content: "▼";     color: red; } .menu summary:before{     content: "▶";     font-size:12px;     color: red; } .menu summary {     height: 44px;     line-height: 44px;     text-indent: 10px;     background: #f2f2f2;     cursor: pointer; }

现在颜色就有了

折叠

至于浏览器兼容，目前IE是不兼容的