使用HTML5 details,summary实现，展开，下拉，树的效果

1-展开效果

HTML

	        <details class="details-2" open>
	            <summary tabindex="-1"><a href="javascript:">这是示例</a></summary>
	            <content>本案例隐藏原生小三角，使用自定义小三角。</content>
	        </details>

CSS

        .details-2 ::-webkit-details-marker {
            display: none;
        }
        .details-2 ::-moz-list-bullet {
            font-size: 0;
        }
        .details-2 summary {
            padding: 5px;
            background-color: #f0f0f0;
        }
        .details-2 content {
            display: block;
            padding: 5px;
            background-color: #f5f7f7;
        }
        /* 自定义的三角 */
        .details-2 summary::after {
            content: '';
            position: absolute;
            width: 1em; height: 1em;
            margin: .2em 0 0 .5ch;
            background: url(./arrow-on.svg) no-repeat;
            background-size: 100% 100%;
            transition: transform .2s;
        }
        .details-2:not([open]) summary::after {
            margin-top: .25em;
            transform: rotate(90deg);    
        }
        summary {
            user-select: none;
            outline: 0;
        }
        summary a {
            color: inherit;
        }

2-“更多”展开与收起效果

CSS代码：

	::-webkit-details-marker {
	    display: none;
	}
	::-moz-list-bullet {
	    font-size: 0;
	    float: left;
	}
	summary {
	    user-select: none;
	    outline: 0;
	}
	.more {
	    display: none;
	}
	[open] .more {
	    display: block;
	}
	[open] summary a {
	    font-size: 0;
	}
	[open] summary a::before {
	    content: '收起';
	    font-size: 14px;
	}

HTML代码：

	<details>
	    <summary>
	        <p>据台媒报道，大...青睐。</p>
	        <div class="more">
	            <p>其他几首歌曲...</p>
	        </div>
	        <a>更多</a>
	    </summary> 
	</details>

3-自定义下拉框等效果

CSS代码：

	/* 隐藏默认三角 */
	::-webkit-details-marker {
	    display: none;
	}
	::-moz-list-bullet {
	    font-size: 0;
	    float: left;
	}
	summary {
	    display: inline-block;
	    padding: 5px 28px;
	    text-indent: -15px;
	    user-select: none;
	    position: relative;
	    z-index: 1;
	}
	summary::after {
	    content: '';
	    position: absolute;
	    width: 12px; height: 12px;
	    margin: 4px 0 0 .5ch;
	    background: url(./arrow-on.svg) no-repeat;
	    background-size: 100% 100%;
	    transition: transform .2s;
	}
	[open] summary,
	summary:hover {
	    background-color: #fff;
	    box-shadow: inset 1px 0 #ddd, inset -1px 0 #ddd;
	}
	[open] summary::after {
	    transform: rotate(180deg);
	}
	.box {
	    position: absolute;
	    border: 1px solid #ddd;
	    background-color: #fff;
	    min-width: 100px;
	    padding: 5px 0;
	    margin-top: -1px;
	}
	.box a {
	    display: block;
	    padding: 5px 10px;
	    color: inherit;
	}
	.box a:hover {
	    background-color: #f0f0f0;
	}
	.box sup {
	    position: absolute;
	    color: #cd0000;
	    font-size: 12px;
	    margin-top: -.25em;
	}

HTML代码：

	<div class="bar">
	    <details>
	        <summary>我的消息</summary> 
	        <div class="box">
	            <a href>我的回答<sup>12</sup></a>
	            <a href>我的私信</a>
	            <a href>未评价订单<sup>2</sup></a>
	            <a href>我的关注</a>
	        </div>
	    </details>
	</div>
	<p>这里放一段文字表明上面的是悬浮效果。</p>

4-带slideUp/slideDown效果的多项折叠菜单

CSS

	/* 隐藏默认三角 */
	::-webkit-details-marker {
	    display: none;
	}
	::-moz-list-bullet {
	    font-size: 0;
	    float: left;
	}
	summary {
	    user-select: none;
	    outline: 0;
	}
	summary::after {
	    content: '';
	    position: absolute;
	    width: 12px; height: 12px;
	    margin: 4px 0 0 .5ch;
	    background: url(./arrow-on.svg) no-repeat;
	    background-size: 100% 100%;
	    transition: transform .2s;
	}
	[open] summary::after {
	    transform: rotate(90deg);
	}
	/* 动画效果 */
	details + dl {
	    max-height: 0;
	    transition: max-height .25s;
	    margin: 0 0 1rem;
	    overflow: hidden;
	}
	[open] + dl {
	    max-height: 100px;
	}

HTML代码：

	<details open><summary>订单中心</summary></details>
	<dl>
	    <dd><a href>我的订单</a></dd>
	    <dd><a href>我的活动</a></dd>
	    <dd><a href>评价晒单</a></dd>
	    <dd><a href>购物助手</a></dd>
	</dl>
	<details open><summary>关注中心</summary></details>
	<dl>
	    <dd><a href>关注的商品</a></dd>
	    <dd><a href>关注的店铺</a></dd>
	    <dd><a href>关注的专辑</a></dd>
	    <dd><a href>收藏的内容</a></dd>
	</dl>
	<details open><summary>资产中心</summary></details>
	<dl>
	    <dd><a href>余额</a></dd>
	    <dd><a href>优惠券</a></dd>
	    <dd><a href>礼品卡</a></dd>
	</dl>

原文地址：http://www.zhangxinxu.com/wordpress/2018/01/html5-details-summary-no-js-ux/