vue和react等項(xiàng)目中更簡(jiǎn)單的實(shí)現(xiàn)展開(kāi)收起更多等效果示例

前言

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括廣安網(wǎng)站建設(shè)、廣安網(wǎng)站制作、廣安網(wǎng)頁(yè)制作以及廣安網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，廣安網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到廣安省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

本文題目中雖然寫(xiě)有vue和react,但是并非vue和react相關(guān)知識(shí)，而是最基本的html5和css3的一些知識(shí)，之所以寫(xiě)vue，是因?yàn)槲易罱?xiàng)目中用到了類(lèi)似效果，我用vue相關(guān)知識(shí)實(shí)現(xiàn)并不雅觀，用html5和css3實(shí)現(xiàn)，則更加完美。

項(xiàng)目案例

項(xiàng)目中有如下效果：

vue和react等項(xiàng)目中更簡(jiǎn)單的實(shí)現(xiàn)展開(kāi)收起更多等效果示例

好多展開(kāi)收起，對(duì)于這個(gè)的實(shí)現(xiàn)，我一開(kāi)始用了vue一些比較挫的dom操作，就是父元素toggleClass一個(gè)類(lèi)名，進(jìn)行子元素的顯示和隱藏。

由于這個(gè)方法是通用方法，項(xiàng)目中好多地方使用，代碼大概如下：

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");
 }
}

這樣寫(xiě)，既不友好，后期又難以維護(hù)。最近重構(gòu)項(xiàng)目的時(shí)候，把這些地方都重構(gòu)了，用了今天介紹的方法！更多重構(gòu)要點(diǎn)，請(qǐng)點(diǎn)擊vue項(xiàng)目重構(gòu)技術(shù)要點(diǎn) 這篇文章。

html5和css3實(shí)現(xiàn)展開(kāi)收起

代碼如下：


  圖表參數(shù)
  這里是包含的div等其他展示元素

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本身就是一個(gè)展開(kāi)收起的效果。假如不了解，可以查看。

隱藏默認(rèn)三角如下：

.haorooms ::-webkit-details-marker {
  display: none;
}
.haorooms ::-moz-list-bullet {
  font-size: 0;
}

details和summary的ui優(yōu)化

張?chǎng)涡裼衅恼拢瑢?duì)details和summary介紹的很詳細(xì)

對(duì)應(yīng)其UI的優(yōu)化，主要有如下幾個(gè)方面：

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;

這樣對(duì)無(wú)障礙訪問(wèn)非常不友好，優(yōu)化方案可以看張?chǎng)涡翊笊竦淖龇ā?/p>

details和summary其他應(yīng)用

1、更多效果


  
    測(cè)試內(nèi)容測(cè)試內(nèi)容
    
      haorooms測(cè)試內(nèi)容測(cè)試內(nèi)容...
    
    更多

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代碼：


  
    我的消息 
    
      我的回答¹²
      我的私信
      未評(píng)價(jià)訂單²
      我的關(guān)注
    
  

這里放一段文字表明上面的是懸浮效果。

3、樹(shù)形菜單效果

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代碼：


  我的視頻
  
    爆肝工程師的異世界狂想曲
    tv1-720p.mp4
    tv2-720p.mp4
    ...
    tv10-720p.mp4
  
  
    七大罪
    七大罪B站00合集.mp4
  
  珍藏動(dòng)漫網(wǎng)盤(pán)地址.txt
  我們的小美好.mp4

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享標(biāo)題：vue和react等項(xiàng)目中更簡(jiǎn)單的實(shí)現(xiàn)展開(kāi)收起更多等效果示例
瀏覽地址：http://www.xueling.net.cn/article/jpgogg.html

老熟女激烈的高潮_日韩一级黄色录像_亚洲1区2区3区视频_精品少妇一区二区三区在线播放_国产欧美日产久久_午夜福利精品导航凹凸

重慶分公司，新征程啟航

vue和react等項(xiàng)目中更簡(jiǎn)單的實(shí)現(xiàn)展開(kāi)收起更多等效果示例

其他資訊