這篇文章主要介紹了vue和react等項目中更簡單的實現展開收起更多等效果示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
#前言
本文題目中雖然寫有vue和react,但是並非vue和react相關知識,而是最基本的html5和css3的一些知識,之所以寫vue,是因為我最近專案中用到了類似效果,我用vue相關知識實現並不雅觀,用html5和css3實現,則更加完美。
專案案例
專案中有以下效果:
#好多展開收起,對於這個的實現,我一開始用了vue一些比較挫的dom操作,就是父元素toggleClass一個類名,進行子元素的顯示和隱藏。
由於這個方法是通用方法,專案中好多地方使用,程式碼大概如下:
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"); } }
這樣寫,既不友好,後期又難以維護。最近重構專案的時候,把這些地方都重構了,用了今天介紹的方法!更多重構要點,請點選vue專案重構技術要點 這篇文章。
html5與css3實作展開收起
程式碼如下:
<details class="haorooms" open> <summary>图表参数</summary> <content>这里是包含的p等其他展示元素</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); } /* 隐藏默认三角 */ .haorooms ::-webkit-details-marker { display: none; } .haorooms ::-moz-list-bullet { font-size: 0; }
程式碼解釋
html5的detail和summary本身就是一個展開收起的效果。如果不了解, 可以查看 。
隱藏預設三角形如下:
.haorooms ::-webkit-details-marker { display: none; } .haorooms ::-moz-list-bullet { font-size: 0; }
details和summary的ui優化
張鑫旭有篇文章,對details和summary介紹的很詳細
對應其UI的最佳化,主要有以下幾個面向:
1、小三角的最佳化,包括顏色、隱藏、位置、替換。
2、outline輪廓的去除
小三角顏色修改
.haorooms ::-webkit-details-marker { color: gray; } .haorooms ::-moz-list-bullet { color: gray; }
小三角位置修改-右側顯示
.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;
這樣對無障礙訪問非常不友好,優化方案可以看張鑫旭大神的做法。
details和summary其他應用程式
1、更多效果
<details> <summary> <p>测试内容测试内容</p> <p class="more"> <p>haorooms测试内容测试内容...</p> </p> <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程式碼:
/* 隐藏默认三角 */ ::-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程式碼:
<p class="bar"> <details> <summary>我的消息</summary> <p class="box"> <a href>我的回答<sup>12</sup></a> <a href>我的私信</a> <a href>未评价订单<sup>2</sup></a> <a href>我的关注</a> </p> </details> </p> <p>这里放一段文字表明上面的是悬浮效果。</p>
3、樹狀選單效果
#CSS程式碼:
/* 隐藏默认三角 */ ::-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> <p>tv1-720p.mp4</p> <p>tv2-720p.mp4</p> ... <p>tv10-720p.mp4</p> </details> <details> <summary>七大罪</summary> <p>七大罪B站00合集.mp4</p> </details> <p>珍藏动漫网盘地址.txt</p> <p>我们的小美好.mp4</p> </details>
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
#以上是使用vue和react來實現展開收起等效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!