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 ...
随机推荐
- 代码随想录算法训练营Day35 贪心算法
代码随想录算法训练营 代码随想录算法训练营Day35 贪心算法| 860.柠檬水找零 406.根据身高重建队列 452. 用最少数量的箭引爆气球 860.柠檬水找零 题目链接:860.柠檬水找零 在柠 ...
- Java(数组声明创建、初始化、特点、内存分析、边界)
数组的定义 数组是相同类型数据的有序集合 数组描述的是相同类型的若干数据,按照一定先后次序排序组合而成 其中,每一个数据称作一个数组元素,每个数组元素可以通过下标访问它们 1.数组声明和创建 声明 d ...
- JAVA 使用IText7 + Freemarker 动态数据生成PDF实现案例
技术方案:IText7 + Freemarker 技术文档 Itext 官网:https://itextpdf.com/ itext API文档:https://api.itextpdf.com/iT ...
- Android strings.xml按照key修改
strings.xml匹配替换 将两个Android项目中的多语言字符串文件(strings.xml)进行比较,如果其中一个项目中包含另一个项目没有的字符,则合并到单一的输出文件,并以 key 在原始 ...
- .Net7基础类型的优化和循环克隆优化
前言 .Net7里面对于基础类型的优化,是必不可少的.因为这些基础类型基本上都会经常用到,本篇除了基础类型的优化介绍之外,还有一个循环克隆的优化特性,也一并看下. 概括 1.基础类型优化 基础类型的优 ...
- 手把手教你实战TDD
1. 前言 领域驱动设计,测试驱动开发. 我们在<手把手教你落地DDD>一文中介绍了领域驱动设计(DDD)的落地实战,本文将对测试驱动开发(TDD)进行探讨,主要内容有:TDD基本理解.T ...
- C++面试八股文:什么是左值,什么是右值?
某日二师兄参加XXX科技公司的C++工程师开发岗位第16面: 面试官:什么是左值,什么是右值? 二师兄:简单来说,左值就是可以使用&符号取地址的值,而右值一般不可以使用&符号取地址. ...
- 2023-06-18:给定一个长度为N的一维数组scores, 代表0~N-1号员工的初始得分, scores[i] = a, 表示i号员工一开始得分是a, 给定一个长度为M的二维数组operatio
2023-06-18:给定一个长度为N的一维数组scores, 代表0~N-1号员工的初始得分, scores[i] = a, 表示i号员工一开始得分是a, 给定一个长度为M的二维数组operatio ...
- Java 文件写入不覆盖的写法
FileOutputStream o = null; File file = null; FileWriter fw = null; byte[] buff = new byte[]{}; try { ...
- 自然语言处理 Paddle NLP - 预训练模型产业实践课-理论
模型压缩:理论基础 模型压缩基本方法分为三类: 量化 裁剪 蒸馏 量化 裁剪 绿线:随机裁剪 30% 已经扛不住了 蓝线:60% 还不错 蒸馏 蒸馏任务与原来的学习任务同时进行. 对于没有标注的数据, ...