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 使用手册(一)
Sep 23 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
JavaScript实现答题评分功能页面
Jun 24 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接收POST数据,解析json数据
2013/06/28 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
js获取url参数的使用扩展实例
2007/12/29 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
javascript 写类方式之六
2009/07/05 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python实现二分查找算法实例
2015/05/26 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
python字符串连接方法分析
2016/04/12 Python
Python正则表达式常用函数总结
2017/06/24 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
python socket 聊天室实例代码详解
2019/11/14 Python
用python对excel查重
2020/12/07 Python
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
公务员试用期满考核材料
2014/05/22 职场文书
政风行风评议心得体会
2014/10/21 职场文书
《少年闰土》教学反思
2016/02/18 职场文书