//点击菜单时箭头旋转
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控件)的更多相关文章

  1. 旋转动画用控件RotateView

    旋转动画用控件RotateView 最终效果: 源码: RotateView.h 与 RotateView.m // // RotateView.h // RotateAnimationView // ...

  2. QTP 自动化测试桌面程序--笔记(下拉选择、右键菜单、在控件仓库中查找对应的控件)

    0 在收集窗口控件信息时-最好将可输入的文字去掉,不然控件的名称按输入的文字标记 1 编辑时录制脚本-默认按当前显示的填入的数据标记控件 可以使用 tool-spy-查看控件的x,y 坐标,按坐标在学 ...

  3. dev下拉框选择不同值显示不同控件

    单列的ASPxFormLayout直接前台控制就可以了,多列的前台控制后会出现空白 <dx:LayoutItem Caption="内容类型" Height="40 ...

  4. extjs combobox 设置下拉时显示滚动条 设置显示条数

    extjs在点击下拉时如果没有限制它的高度,那么它的默认最大高度是300,显示的时候就会显示300的高度,知道选项内容超过这个高度时才会自动显示滚动条,往往在有些时候我们希望让combobox显示一个 ...

  5. 定制自己的动画 View 控件(Canvas 使用)

    定制自己的动画 View 控件(Canvas 使用) 如果要定义自己的 View 控件,则需要新建一个类继承 android.view.View.然后在 onDraw 中写自己需要实现的方式. 这里定 ...

  6. C#TreeView控件遍历文件夹下所有子文件夹以及文件

    一直对递归的理解不深刻,有时候觉得很简单,可是用起来总会出错.这里需要在TreeView控件里显示一个文件夹下的所有目录以及文件,毫无意外的需要用到递归. 一开始,想到用递归写一个生成每一个节点(Tr ...

  7. [转] C#2010 在TreeView控件下显示路径下所有文件和文件夹

    原文 张丹-小桥流水,C#2010 在TreeView控件下显示路径下所有文件和文件夹 C#2010学习过程中有所收获,便总结下来,希望能给和我一样在学习遇到困难的同学提供参考. 本文主要介绍两个自定 ...

  8. Delphi下Treeview控件基于节点编号的访问

    有时我们需要保存和重建treeview控件,本文提供一种方法,通过以树结构节点的编号访问树结构,该控件主要提供的方法如下:      function GetGlobeNumCode(inNode:T ...

  9. Delphi下Treeview控件基于节点编号的访问1

    有时我们需要保存和重建treeview控件,本文提供一种方法,通过以树结构节点的编号访问树结构,该控件主要提供的方法如下:      function GetGlobeNumCode(inNode:T ...

随机推荐

  1. kafka connector

    Kafka Connect 是一种用于在 Kafka 和其他系统之间可扩展的.可靠的的流式传输数据的工具.它使得能偶快速定义将大量数据集合移入和移除 kafka 连接器变得简单. kafka conn ...

  2. netty实现websocket客户端(附:测试服务端代码)

    1,客户端启动类 package test3; import io.netty.bootstrap.Bootstrap; import io.netty.buffer.Unpooled; import ...

  3. LinkQueue(链队)

    今天学习了队列,因为前面写了好几个链表实现的数据结构基本上都懂了,然后大致了解了一下队列的特点,便决定用自己的理解来实现一个,然后实现了. (2018-02-14 代码更新) Head file: # ...

  4. office365激活码序列号密钥:

    亲测可用: NGCM9-FWB6X-9WKYC-GRWVD-63B3P  

  5. 「USACO5.5」矩形周长Picture

    题目描述 墙上贴着许多形状相同的海报.照片.它们的边都是水平和垂直的.每个矩形图片可能部分或全部的覆盖了其他图片.所有矩形合并后的边长称为周长. 编写一个程序计算周长. 如图1所示7个矩形. 如图2所 ...

  6. php cli 下 php.ini 配置

    // 查看phpcli 模式下 扩展 php -m // 查看php cli 版本 php -v 查看命令行的ini路径,命令行下运行 php --ini Loaded Configuration F ...

  7. 女神说拍了一套写真集想弄成素描画?很简单,用Python就行了!

    素描作为一种近乎完美的表现手法有其独特的魅力,随着数字技术的发展,素描早已不再是专业绘画师的专利,今天这篇文章就来讲一讲如何使用python批量获取小姐姐素描画像.文章共分两部分: 第一部分介绍两种使 ...

  8. sql server删除重复的数据保留一条

    DELETE FROM [TCX_1710_SHZJ].[dbo].[PR_BindingTray] WHERE 1=1 AND SNum in (SELECT * FROM ( (SELECT SN ...

  9. Java基础知识笔记第一章:入门

    java的地位: java具有面向对象,与平台无关,安全,稳定和多线程等优良特性,是目前软件设计中优秀的编程语言. java的特点: 1.简单 2.面向对象 3.平台无关 jre(java runti ...

  10. spring boot 中 2.X 的跨域请求

    解决跨域: @Configuration @EnableAutoConfiguration public class ZooConfiguration { @Bean public FilterReg ...