侧边栏下拉时箭头的旋转动画(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 ...
随机推荐
- spark wordcount程序
spark wordcount程序 IllegalAccessError错误 这个错误是权限错误,错误的引用方法,比如方法中调用private,protect方法. 当然大家知道wordcount业务 ...
- Python数据分析之Numpy操作大全
从头到尾都是手码的,文中的所有示例也都是在Pycharm中运行过的,自己整理笔记的最大好处在于可以按照自己的思路来构建矿建,等到将来在需要的时候能够以最快的速度看懂并应用=_= 注:为方便表述,本章设 ...
- 工业现场总线和工业以太网和工业IIOT
IIoT 称为工业物联网 ,包括机器的预测性维护和生产单元的自动化控制.以更高的速度获取和访问更大量的数据,打破数据孤岛,并将所有人员,数据和流程从工厂车间连接到执行办公室.企业领导者可以使用 IIo ...
- MBR扇区故障修复!
一:进行分区且格式化硬盘 [root@roomc~]#mkfs -t ext4 /dev/sdb1 //格式化sdb1盘 二:模拟破坏/sda主硬盘破坏再修复! [root@roomc~]#mk ...
- wc、grep 、 cut、paste 和 tr 命令的用法
1 wc 命令 wc 命令是一个统计的工具,主要用来显示文件所包含的行.字和字节数. wc 命令是 word count 的缩写. (1)命令格式 wc [选项] [文件] (2)常用参数 参数 描述 ...
- 【Javaweb】Servlet的xml和注解配置
1.xml <%@ page language="java" contentType="text/html;" %> <!DOCTYPE ht ...
- Centos 下安装php
1 从php 官网下载源安装包 http://php.net/downloads.php // 安装php 扩展 2 yum install libxml2 libxml2-devel openssl ...
- Python - 模块中的"if __name__ == '__main__':"
1.1 如果导入的模块除了定义函数之外还中有可以执行代码,那么Python解释器在导入这个模块时就会执行这些代码. module1.py: def foo(): print('module 1') f ...
- C++常量表达式、const、constexpr(C++11新增)的区别
常量表达式是指值不会改变且在编译过程中就能够得到计算结果的表达式,能在编译时求值的表达式. 程序先编译再运行: 在编译阶段, 编译器将在编译过程中把用到该常量的地方都全都替换为 常量的值. 但是常量 ...
- 【剑指Offer面试编程题】题目1355:扑克牌顺子--九度OJ
题目描述: LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他 ...