vue和react等項目中更簡單的實現(xiàn)展開收起更多等效果示例
更新時間：2018年02月22日 08:23:49 作者：Haorooms
這篇文章主要介紹了vue和react等項目中更簡單的實現(xiàn)展開收起更多等效果示例,具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言
本文題目中雖然寫有vue和react,但是并非vue和react相關知識，而是最基本的html5和css3的一些知識，之所以寫vue，是因為我最近項目中用到了類似效果，我用vue相關知識實現(xiàn)并不雅觀，用html5和css3實現(xiàn)，則更加完美。
項目案例
項目中有如下效果：
好多展開收起，對于這個的實現(xiàn)，我一開始用了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實現(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);
}
/* 隱藏默認三角 */
.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優(yōu)化
張鑫旭有篇文章，對details和summary介紹的很詳細
對應其UI的優(yōu)化，主要有如下幾個方面：
1、小三角的優(yōu)化，包括顏色、隱藏、位置、替換。
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;
這樣對無障礙訪問非常不友好，優(yōu)化方案可以看張鑫旭大神的做法。
details和summary其他應用
1、更多效果
<details>
<summary>
<p>測試內容測試內容</p>
<div class="more">
<p>haorooms測試內容測試內容...</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代碼：
/* 隱藏默認三角 */
::-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>我的關注</a>
</div>
</details>
</div>
<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>
<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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue中的同步調用和異步調用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了vue如何封裝選擇文件組件和選擇文件api問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
今天小編就為大家分享一篇vue實現(xiàn)點擊選中,其他的不選中方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue使用vue-area-linkage實現(xiàn)地址三級聯(lián)動效果的示例
很多時候我們需要使用地址三級聯(lián)動，即省市區(qū)三級聯(lián)動，這篇文章主要介紹了Vue使用vue-area-linkage實現(xiàn)地址三級聯(lián)動效果的示例，感興趣的小伙伴們可以參考一下2018-06-06
vue中element-ui不能修改el-input框,或是不能修改某些值問題
這篇文章主要介紹了vue中element-ui不能修改el-input框,或是不能修改某些值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了使用vue制作滑動標簽，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Vue中使用element-ui給按鈕綁定一個單擊事件實現(xiàn)點擊按鈕就彈出dialog對話框
最近遇到了個需求是使用element-ui插件編寫頁面,點擊按鈕,彈出對話框,這篇文章主要給大家介紹了關于Vue中使用element-ui給按鈕綁定一個單擊事件實現(xiàn)點擊按鈕就彈出dialog對話框的相關資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue中路由的前進和后退問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
今天小編就為大家分享一篇vue項目初始化到登錄login頁面的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue父子組件方法this.$emit()有時候不觸發(fā)問題及解決
這篇文章主要介紹了Vue父子組件方法this.$emit()有時候不觸發(fā)問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05