HTML5 details/summary多列菜单折叠展开效果实例页面

CSS代码：

/* 隐藏默认三角 */
::marker {
    font-size: 0;
}
summary {
    user-select: none;
    outline: 0;
}
dt::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] dt::after {
    transform: rotate(90deg);
}
                

HTML代码：

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