js原生 toggle函数编写
工作中遇到了需要动态切换slide下拉框展示与隐藏,同时需要切换元素上附加的样式,以下脚本为实现此功能的实践。
//元素点击时切换隐藏与展示逻辑
var slidsDownShow = document.querySelectorAll('div.deliveryArea__link > span');
    if(slidsDownShow){
        slidsDownShow.forEach(function(item){
            item.addEventListener("click",function(e){
            var tar = e.target || e.srcElement;
            if(tar.parentElement.nextElementSibling.style.display != 'block'){
                tar.parentElement.nextElementSibling.style.display = 'block';
            }else{
                tar.parentElement.nextElementSibling.style.display = 'none';
            }
            console.log('click info1 ..')});
        })
    }
    //定义切换样式的函数
    function toggleClass(ele,cln) {
      if ((' ' + document.querySelector(ele).className + ' ').indexOf(' ' + cln + ' ') > -1) {
        document.querySelector(ele).classList.remove(cln)
      } else {
        document.querySelector(ele).classList.add(cln)
      }
    }
    var subEles = document.querySelectorAll('.deviceInfoArea__infoTitle');
    subEles.forEach(function (item) {
      item.addEventListener('click', function () {
        //调用上面的方法
        toggleClass('.deviceInfoArea__infoTitle','open')
        if(this.nextElementSibling.style.display == 'block'){
            this.nextElementSibling.style.display = 'none';
        }else{
            this.nextElementSibling.style.display = 'block';
        }
      })
    })js原生 toggle函数编写的更多相关文章
- html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结
		Day27 html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ... 
- js原生之函数
		1.函数作为参数传给其他函数: data.sort(function(a,b){return a-b}) //关于数组的sort函数,其回调函数返回负值,a在b之前 //正值,b在a ... 
- 关于JS的clone()函数编写的一些问题
		问题讲述:用js 实现一个clone()克隆函数,该函数会把输入进去的不同类型值Number,String,Undefined,Boolean,Function,Null,Object,Array,R ... 
- js原生的url操作函数,及使用方法。(附:下边还有jquery对url里的中文解码函数)
		js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ... 
- js原生函数一些封装
		这是一些js原生封装的函数,主要是为了兼容IE浏览器,如下 获取css样式 function getStyle(ele, prop) { if(window.getComputedStyle) { r ... 
- 15、js 原生基础总结
		Day1 一.什么是JS? ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ... 
- js原生高逼格插件
		如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ... 
- js原生代码实现轮播图案例
		一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ... 
- JS原生效果瀑布流布局的实现(一)
		JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ... 
- js产生随机数函数
		函数: //产生随机数函数 function RndNum(n){ var rnd=""; for(var i=0;i<n;i++) rnd+=Math.floor(Math ... 
随机推荐
- SCI 投稿中像素、DPI、图片分辨率的一些知识
			最近在学习 Linux 命令行下的 ImageMagick 图像处理,对图像本身的一些概念有点懵,搜集整理了一点资料,仅供自己和大家学习与参考. SCI 期刊对分辨率大多都有一定的要求,例如一段来自 ... 
- 基于 prefetch 的 H5 离线包方案
			前言 对于电商APP来讲,使用H5技术开发的页面占比很高.由于H5加载速度非常依赖网络环境,所以为了提高用户体验,针对H5加载速度的优化非常重要.离线包是最常用的优化技术,通过提前下载H5渲染需要的H ... 
- vue中的数据代理
			原理:通过vm对象来代理 Vue 中我们自己定义在data中的数据,首先: 我们自己定义的data中的对象或者属性 都会存储到vm中的_data 中进行数据劫持其次: 通过Object.defineP ... 
- Gitlab版本升级
			Gitlab docker部署命令 docker run -d -p 8443:443 -p 30080:80 -p 9444:22 --name gitlab --restart always \ ... 
- 记录部署Datax、Datax-web 过程碰到的问题
			我的第一篇博客 datax在网络上部署的文档有很多,这里不重复阐述,只描述过程中碰到的些许问题,记录下来. 1. 1 ERROR RetryUtil - Exception when calling ... 
- Linux多线程(8.3 线程同步与互斥)
			3. 线程的同步与互斥 为什么需要同步与互斥  一个进程运行时,数据存储在内存中.如果一个数据要进行运算,必须先将数据拷贝到寄存器中.比如要对栈上的一个int i进行"++"操作 ... 
- GPT生成式预训练Transformer架构应用实战
			目录 1. 引言 2. 技术原理及概念 2.1 基本概念解释 2.2 技术原理介绍 2.3 相关技术比较 3. 实现步骤与流程 3.1 准备工作:环境配置与依赖安装 3.2 核心模块实现 3.3 集成 ... 
- Linux从文件中逐行读取文件名并将匹配的文件复制到指定目录
			问题应该算挺常见的但是一句话还挺难说清楚,所以百度特别难搜. 场景就是,有一堆以员工名称命名的文件(名称可能还有字母数字等前后缀),现在给定一个员工清单,需要从这些文件中筛选出员工清单上列出的员工的文 ... 
- Python运维开发之路《数据类型》
			一. python数据类型 python的五大基本数据类型,数字.字符串.列表.元组.字典;其他数据类型,类型type.Null.文件.集合.函数/方法.类.模块. 1.数字 1 ①整型 2 十进制转 ... 
- [随笔]记一此更新win10后mysql服务消失的问题
			十几天前系统自动更新 没在意 几天前用php连mysql的时候 报错 Fatal error: Uncaught PDOException: SQLSTATE[HY000] [2002] 由于目标计算 ... 
