侧边栏下拉时箭头的旋转动画(treeView控件)
//点击菜单时箭头旋转
let treeView = document.getElementsByClassName("treeview");//let解决闭包问题
let last=document;
for (let i = 0; i <treeView.length ; i++) {
treeView[i].addEventListener("click",function(){
let that = treeView[i];
if (that.classList.contains("menu-open")){
last.getElementsByTagName("i")[1].style.transform="rotateZ(180deg)";
that.getElementsByTagName("i")[1].style.transform="rotateZ(0deg)";
that.getElementsByTagName("i")[1].style.transition="0.5s";
}else{
last.getElementsByTagName("i")[1].style.transform="rotateZ(0deg)";
that.getElementsByTagName("i")[1].style.transform="rotateZ(180deg)";
that.getElementsByTagName("i")[1].style.transition="0.5s";
}
//把上次点击事件的元素保存
last = that;
})
}
<!--网页源代码-->

侧边栏下拉时箭头的旋转动画(treeView控件)的更多相关文章
- 旋转动画用控件RotateView
旋转动画用控件RotateView 最终效果: 源码: RotateView.h 与 RotateView.m // // RotateView.h // RotateAnimationView // ...
- QTP 自动化测试桌面程序--笔记(下拉选择、右键菜单、在控件仓库中查找对应的控件)
0 在收集窗口控件信息时-最好将可输入的文字去掉,不然控件的名称按输入的文字标记 1 编辑时录制脚本-默认按当前显示的填入的数据标记控件 可以使用 tool-spy-查看控件的x,y 坐标,按坐标在学 ...
- dev下拉框选择不同值显示不同控件
单列的ASPxFormLayout直接前台控制就可以了,多列的前台控制后会出现空白 <dx:LayoutItem Caption="内容类型" Height="40 ...
- extjs combobox 设置下拉时显示滚动条 设置显示条数
extjs在点击下拉时如果没有限制它的高度,那么它的默认最大高度是300,显示的时候就会显示300的高度,知道选项内容超过这个高度时才会自动显示滚动条,往往在有些时候我们希望让combobox显示一个 ...
- 定制自己的动画 View 控件(Canvas 使用)
定制自己的动画 View 控件(Canvas 使用) 如果要定义自己的 View 控件,则需要新建一个类继承 android.view.View.然后在 onDraw 中写自己需要实现的方式. 这里定 ...
- C#TreeView控件遍历文件夹下所有子文件夹以及文件
一直对递归的理解不深刻,有时候觉得很简单,可是用起来总会出错.这里需要在TreeView控件里显示一个文件夹下的所有目录以及文件,毫无意外的需要用到递归. 一开始,想到用递归写一个生成每一个节点(Tr ...
- [转] C#2010 在TreeView控件下显示路径下所有文件和文件夹
原文 张丹-小桥流水,C#2010 在TreeView控件下显示路径下所有文件和文件夹 C#2010学习过程中有所收获,便总结下来,希望能给和我一样在学习遇到困难的同学提供参考. 本文主要介绍两个自定 ...
- Delphi下Treeview控件基于节点编号的访问
有时我们需要保存和重建treeview控件,本文提供一种方法,通过以树结构节点的编号访问树结构,该控件主要提供的方法如下: function GetGlobeNumCode(inNode:T ...
- Delphi下Treeview控件基于节点编号的访问1
有时我们需要保存和重建treeview控件,本文提供一种方法,通过以树结构节点的编号访问树结构,该控件主要提供的方法如下: function GetGlobeNumCode(inNode:T ...
随机推荐
- class A<T>where T:new()是什么意思
这是C#泛型类声明的语法class A<T> 表示 A类接受某一种类型,泛型类型为T,需要运行时传入where表明了对类型变量T的约束关系.where T:new()指明了创建T的实例时应 ...
- Nginx Rewrite域名及资源重定向!(重点)
第一步:搭建Nginx服务 第二步:修改主配置文件 [root@ns2 ~]# vim /usr/local/nginx/conf/nginx.conf user nginx nginx; work ...
- LeetCode.62——不同路径
问题描述: 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为"Start" ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为 ...
- Solidity顺序编程
1.事件 是合约和区块链通讯的一种机制.前端可以监听事件. 使用关键字event(参数);来申请 2.require指令: 使用require指令,使得函数在执行过程中,在不满足某些条件的时候抛出错误 ...
- UIScrollView学习指南
--前言 笔者结合自己的工作经验,梳理关于UIScrollView究竟需要掌握哪些知识才算是一个好手.至于具体的实施方案,网上资源很多,自行了解吧. --正文 1.涉及到滚动和放大的功能,优先考虑使用 ...
- Spring Boot 2.x教程-Thymeleaf 原理是什么
layout: post title: Spring Boot 2.x教程-Thymeleaf 原理是什么 categories: SpringBoot description: Spring Boo ...
- Java Juc学习笔记
Java JUC 简介 在 Java 5.0 提供了 java.util.concurrent (简称JUC )包,在此包中增加了在并发编程中很常用的实用工具类,用于定义类似于线程的自定义子系统,包括 ...
- svn 回退/更新/取消某个版本命令详解
1,取消文件: svn revert 文件名 2,取消目录 svn revert --depth=infinity 目录名 3,回退版本 方法1: 用svn merge 1) 先svn up,保证更新 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:设定文本小写
<!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...
- KEIL的一些函数
一 Predefined Functions:http://www.keil.com/support/man/docs/uv4cl/uv4cl_df_predeffunct.htm 主要有三角/反三角 ...