//点击菜单时箭头旋转
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. 用java代码打印九九乘法表

    package com.wf; public class cal { public static void main(String[] args) { for(int i=1;i<10;i++) ...

  2. PHP的自定义模板引擎

    前面的话 在大多数的项目组中,开发一个Web程序都会出现这样的流程:计划文档提交之后,前端工程师制作了网站的外观模型,然后把它交给后端工程师,它们使用后端代码实现程序逻辑,同时使用外观模型做成基本架构 ...

  3. Verilog状态机

    以1011为例 代码如下: //1011(Meay型) module state1(clk,in,rst_n,out); input clk; input rst_n; input in; outpu ...

  4. 软件工程 - Test-Driven Development (TDD),测试驱动开发

    参考 https://baike.baidu.com/item/%E6%B5%8B%E8%AF%95%E9%A9%B1%E5%8A%A8%E5%BC%80%E5%8F%91/3328831?fr=al ...

  5. C、C++ 不得宠,微软正开发新的编程语言!

    76 年迭代与更新,编程语言界,谁主沉浮? 在六百多种编程语言中,对于开发者而言,其主观印象中或只有几种主流的编程语言,如 Java.C.C++.C#.新贵 Python 等,而之所以它们能够成为主流 ...

  6. scrapy 和 scrapy-redis

    1.scrapy 是一个 Python 爬虫框架,爬取效率极高,但是不支持分布式.而 scrapy-redis 时一套基于 redis 数据库.运行在 scrapy 框架之上的组件,可以让 scrap ...

  7. PAT A1151 LCA in Binary Tree

    利用树的前序和中序递归判定最小公共祖先~ 直接根据两个序列递归处理~ #include<bits/stdc++.h> using namespace std; ; int N,M; int ...

  8. Windows对应的"Hello,world"程序

    <Windows程序设计>(第五版)(美Charles Petzold著) https://docs.microsoft.com/zh-cn/windows/desktop/apiinde ...

  9. uniapp - 导航切换(样式)

    <view class="text-area" v-for="(menu,i) in menus" :key="i" v-show=& ...

  10. sql数据库的基本操作

    命令行 1.显示当前数据库服务器中的数据库列表:mysql> SHOW DATABASES;2.建立数据库:mysql> CREATE DATABASE 库名;3.建立数据表:mysql& ...