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 相关文章推荐
jQuery把表单元素变为json对象
Nov 06 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
VUE路由动态加载实例代码讲解
Aug 26 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
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
浅谈MySQL中的触发器
2015/05/05 Python
Python多线程实现同步的四种方式
2017/05/02 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
python中字符串的操作方法大全
2018/06/03 Python
django实现后台显示媒体文件
2020/04/07 Python
python利用opencv实现颜色检测
2021/02/23 Python
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
幼教个人求职信范文
2013/12/02 职场文书
我的求职计划书
2014/01/10 职场文书
缓刑人员的思想汇报
2014/01/11 职场文书
社区综治工作汇报
2014/10/27 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
Python+tkinter实现高清图片保存
2022/03/13 Python
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL
Nginx如何配置根据路径转发详解
2022/07/23 Servers