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>我的回答¹²</a><a href>我的私信</a><a href>未評價訂單²</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>優(yōu)惠券</a></dd><dd><a href>禮品卡</a></dd></dl>

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

總結

以上是生活随笔為你收集整理的使用HTML5 details,summary实现，展开，下拉，树的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。