vue和react等项目中更简单的实现展开收起更多等效果示例


Posted in Javascript onFebruary 22, 2018

前言

本文题目中虽然写有vue和react,但是并非vue和react相关知识,而是最基本的html5和css3的一些知识,之所以写vue,是因为我最近项目中用到了类似效果,我用vue相关知识实现并不雅观,用html5和css3实现,则更加完美。

项目案例

项目中有如下效果:

vue和react等项目中更简单的实现展开收起更多等效果示例

好多展开收起,对于这个的实现,我一开始用了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>这里是包含的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优化

张鑫旭有篇文章,对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>
    <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>珍藏动漫网盘地址.txt</div>
  <div>我们的小美好.mp4</div>
</details>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
基于vue.js实现购物车
Jan 15 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 #Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 #Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 #Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 #Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 #Javascript
Vue项目中设置背景图片方法
Feb 21 #Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 #Javascript
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
军人违纪检讨书
2014/02/04 职场文书
会计系毕业求职信
2014/08/07 职场文书
公司员工手册范本
2015/05/14 职场文书
法院执行局工作总结
2015/08/11 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
Django Paginator分页器的使用示例
2021/06/23 Python
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
Redis高并发缓存架构性能优化
2022/05/15 Redis
Redis Lua脚本实现ip限流示例
2022/07/15 Redis