HTML5 details/summary多列菜单滑入滑出效果实例页面

CSS代码：

/* 隐藏默认三角 */
::marker {
    font-size: 0;
}
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>