前言
本文題目中雖然寫有vue和react,但是并非vue和react相關(guān)知識，而是最基本的html5和css3的一些知識，之所以寫vue，是因為我最近項目中用到了類似效果，我用vue相關(guān)知識實(shí)現(xiàn)并不雅觀，用html5和css3實(shí)現(xiàn)，則更加完美。
項目案例
項目中有如下效果：
好多展開收起，對于這個的實(shí)現(xiàn)，我一開始用了vue一些比較挫的dom操作，就是父元素toggleClass一個類名，進(jìn)行子元素的顯示和隱藏。
由于這個方法是通用方法，項目中好多地方使用，代碼大概如下：
toggleShow() { let target = window.event.srcElement; if (target.nodeName == "SPAN") { target.parentNode.parentNode.classList.toggle("toggleclass"); target.classList.toggle("el-icon-arrow-right"); } else { target.parentNode.classList.toggle("toggleclass"); target.children[0].classList.toggle("el-icon-arrow-right"); }}這樣寫，既不友好，后期又難以維護(hù)。最近重構(gòu)項目的時候，把這些地方都重構(gòu)了，用了今天介紹的方法！更多重構(gòu)要點(diǎn)，請點(diǎn)擊vue項目重構(gòu)技術(shù)要點(diǎn) 這篇文章。
html5和css3實(shí)現(xiàn)展開收起
代碼如下：
<details class="haorooms" open> <summary>圖表參數(shù)</summary> <content>這里是包含的div等其他展示元素</content></details>
css代碼
.haorooms{position:relative}.haorooms summary{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: 0;}/* 自定義的三角 */.haorooms summary::after { content: ''; position: absolute; left:0; top:0; width: 15px; height: 15px; background: url(./haorooms.png) no-repeat; /* 自定義的三角圖片 */ background-size: 100% 100%; transition: transform .2s;}.haorooms:not([open]) summary::after { transform: rotate(90deg); }/* 隱藏默認(rèn)三角 */.haorooms ::-webkit-details-marker { display: none;}.haorooms ::-moz-list-bullet { font-size: 0;}代碼解釋
html5的detail和summary本身就是一個展開收起的效果。假如不了解， 可以查看 。
隱藏默認(rèn)三角如下：
.haorooms ::-webkit-details-marker { display: none;}.haorooms ::-moz-list-bullet { font-size: 0;}details和summary的ui優(yōu)化
張鑫旭有篇文章，對details和summary介紹的很詳細(xì)
對應(yīng)其UI的優(yōu)化，主要有如下幾個方面：
1、小三角的優(yōu)化，包括顏色、隱藏、位置、替換。
2、outline輪廓的去除
小三角顏色修改
.haorooms ::-webkit-details-marker { color: gray;}.haorooms ::-moz-list-bullet { color: gray;}小三角位置修改-右側(cè)顯示
.haorooms summary { width: -moz-fit-content; width: fit-content; direction: rtl;}.haorooms ::-webkit-details-marker { direction: ltr;}.haorooms ::-moz-list-bullet { direction: ltr;}outline輪廓的去除
我上面用的是
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: 0;
這樣對無障礙訪問非常不友好，優(yōu)化方案可以看張鑫旭大神的做法。
details和summary其他應(yīng)用
1、更多效果
<details> <summary> <p>測試內(nèi)容測試內(nèi)容</p> <div class="more"> <p>haorooms測試內(nèi)容測試內(nèi)容...</p> </div> <a>更多</a> </summary> </details>
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;}2、懸浮菜單效果
CSS代碼：
/* 隱藏默認(rèn)三角 */::-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>我的關(guān)注</a> </div> </details></div><p>這里放一段文字表明上面的是懸浮效果。</p>
3、樹形菜單效果
CSS代碼：
/* 隱藏默認(rèn)三角 */::-webkit-details-marker { display: none;}::-moz-list-bullet { font-size: 0; float: left;}details { padding-left: 20px;}summary::before { content: ''; display: inline-block; width: 12px; height: 12px; border: 1px solid #999; background: linear-gradient(to right, #999, #999) no-repeat center, linear-gradient(to top, #999, #999) no-repeat center; background-size: 2px 10px, 10px 2px; vertical-align: -2px; margin-right: 6px; margin-left: -20px;}[open] > summary::before { background: linear-gradient(to right, #999, #999) no-repeat center; background-size: 10px 2px;}HTML代碼：
<details> <summary>我的視頻</summary> <details> <summary>爆肝工程師的異世界狂想曲</summary> <div>tv1-720p.mp4</div> <div>tv2-720p.mp4</div> ... <div>tv10-720p.mp4</div> </details> <details> <summary>七大罪</summary> <div>七大罪B站00合集.mp4</div> </details> <div>珍藏動漫網(wǎng)盤地址.txt</div> <div>我們的小美好.mp4</div></details>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
