整个代码如下：

export default {

data () {

return {

}

},

methods:{

slide:function(event){

let curTarget = event.currentTarget,

containsCurClass = curTarget.classList.contains("up"),

nextSibling = curTarget.nextSibling;

while(nextSibling.nodeType == 3 && /\s/.test(nextSibling.nodeValue)){

nextSibling = nextSibling.nextSibling;

};

let detailScrollHeight = nextSibling.scrollHeight;

if(containsCurClass){

curTarget.classList.remove("up");

this.toggleSlide(nextSibling,detailScrollHeight,'500');

}else{

curTarget.classList.add("up");

this.toggleSlide(nextSibling,0,'500');

}

},

toggleSlide:function(dom,height,time){

dom.style.transition = 'height ' + time + 'ms';

dom.style.height = height + 'px';

}

}

}

.same_module{border:1px solid grey;}

.title{color:#fff;height:30px;line-height:30px;background:blue;padding:0 10px;cursor: pointer;overflow: hidden;}

.title span{vertical-align:middle;}

.title .arrow{float: right;}

.detail{overflow: hidden;}

.detail .inner{padding:5px 10px;background: #808080;color:#fff;}

.detail p{line-height: 26px;}

.arrow{

display: inline-block;

border-top: 2px solid;

border-right: 2px solid;

width: 8px;

height: 8px;

border-color: #EA6000;

transform: rotate(315deg);

position: relative;

transition: all 0.5s ease-in;

transform-origin: center center;

top:50%;

margin-top:-10px;

}

.up .arrow{

transform: rotate(135deg);

}

jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

javascript学习-原生javascript的小特效(简单的运动效果)

前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 一:运动特效(主要是通过改变元素的left,right,height,width,opacity来达到运动的效果) 我们今天做一个 ...

原生 JavaScript 代替 jQuery【转】

目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...

抛弃jQuery，拥抱原生JavaScript

前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...

原生javascript封装动画库

****转载自自己发表于牛人部落专栏的文章**** 一.前言 本文记录了自己利用原生javascript构建自己的动画库的过程,在不断改进的过程中,实现以下动画效果: 针对同一个dom元素上相继发生的 ...

你可能不需要 jQuery！使用原生 JavaScript 进行开发

很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...

原生javascript模仿win8等待进度条。

一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

原生javascript写的侧栏跟随效果

浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

四种常见的提示弹出框(success，warning，error，loading)原生JavaScript和jQuery分别实现

原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

随机推荐

关于phpmyadmin #1045无法登陆服务器的问题

修改/home/wwwroot/phpmyadmin/libraries/config.default.php 文件,找到下面两行 $cfg['Servers'][$i]['nopassword'] ...

Ruby Regexp

创建正则表达式对象 #以大写字母开始后面紧跟N个数字,方式一 reg = /[A-Z]\d+/ #方式二 reg = Regexp.new("[A-Z]\d+") reg = Re ...

30天轻松学习javaweb_Range实现断点续传

package com.wzh.test.http; import java.io.FileOutputStream; import java.io.IOException; import java. ...

iOS - 网络 - NSURLSession

1.NSURLSession基础 NSURLConnection在开发中会使用的越来越少,iOS9已经将NSURLConnection废弃,现在最低版本一般适配iOS,所以也可以使用.NSURLCon ...

[BZOJ 1058] [ZJOI2007] 报表统计 【平衡树】

题目链接:BZOJ - 1058 题目分析 这道题看似是需要在序列中插入一些数字,但其实询问的内容只与相邻的元素有关. 那么我们只要对每个位置维护两个数 Ai, Bi, Ai 就是初始序列中 i 这个 ...

win7计划任务执行BAT文件问题

今天下午做了一个调用java 可执行jar的程序,想通过win7的计划任务来调用 批处理命令: java -jar BIDropSyc.jar    或者 javaw -jar BIDropSyc.j ...

Docker 网络之理解 bridge 驱动

笔者在前文中介绍了 CNM(Container Network Model),并演示了 bridge 驱动下的 CNM 使用方式.为了深入理解 CNM 及最常 ...

sql server 2008 windows验证改为混合登陆SqlServer身份验证用户名密码

安装过程中,SQL Server 数据库引擎设置为 Windows 身份验证模式或 SQL Server 和 Windows 身份验证模式.本主题介绍如何在安装后更改安全模式. 如果在安装过程中选择“ ...

应用监控CAT之cat-client源码阅读(一)

CAT 由大众点评开发的,基于 Java 的实时应用监控平台,包括实时应用监控,业务监控.对于及时发现线上问题非常有用.(不知道大家有没有在用) 应用自然是最初级的,用完之后,还想了解下其背后的原理, ...

Java中浮点型数据Float和Double进行精确计算的问题

Java中浮点型数据Float和Double进行精确计算的问题 来源  https://www.cnblogs.com/banxian/p/3781130.html 一.浮点计算中发生精度丢失     ...