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 ...
随机推荐
- 包含引用类型字段的自定义结构体,能作为map的key吗
1. 引言 在 Go 语言中,map是一种内置的数据类型,它提供了一种高效的方式来存储和检索数据.map是一种无序的键值对集合,其中每个键与一个值相关联.使用 map 数据结构可以快速地根据键找到对应 ...
- 深入解析React DnD拖拽原理,轻松掌握拖放技巧!
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值.. 本文作者:霁明 一.背景 1.业务背景 业务中会有一些需要实现拖拽 ...
- Airtest图像识别测试工具原理解读&最佳实践
1 Airtest简介 Airtest是一个跨平台的.基于图像识别的UI自动化测试框架,适用于游戏和App,支持平台有Windows.Android和iOS.Airtest框架基于一种图形脚本语言Si ...
- 创建springboot工程失败解决 spring initializr Error:cannot download
创建springboot工程失败解决 问题描述 原因分析: 网络不好,因为springBooT项目的创建时必须联网的 解决方案: 方案一: 将创建 springBoot 工程的地址更换为如下的地址 阿 ...
- ChatGPT小型平替之ChatGLM-6B本地化部署、接入本地知识库体验
本文期望通过本地化部署一个基于LLM模型的应用,能让大家对构建一个完整的应用有一个基本认知.包括基本的软硬环境依赖.底层的LLM模型.中间的基础框架及最上层的展示组件,最终能达到在本地零编码体验的目的 ...
- Linux从文件中逐行读取文件名并将匹配的文件复制到指定目录
问题应该算挺常见的但是一句话还挺难说清楚,所以百度特别难搜. 场景就是,有一堆以员工名称命名的文件(名称可能还有字母数字等前后缀),现在给定一个员工清单,需要从这些文件中筛选出员工清单上列出的员工的文 ...
- mysql 日期和时间戳的转换
(18条消息) MySQL 日期和时间戳的转换 | 以及DATE_FORMAT()用法_慌途L的博客-CSDN博客_date_format能转换时间戳吗 一小时的时间戳是2*3600*1000,这是1 ...
- 深入浅出synchronized的原理与源码
深入浅出synchronized的原理与源码 1.java对象头关于锁的标识 1.对象头 // 32 bits: // -------- // hash:25 ------------>| ag ...
- MySQL存储之为什么要使用B+树做为储存结构?
导言: 在使用MySQL数据库的时候,我们知道了它有两种物理存储结构,hash存储和B+树存储,由于hash存储使用的少,而B+树存储使用的范围就多些,如 InnoDB和MYISAM引擎都是使用的B+ ...
- Java实现数组去重复的18种写法
说明 数组(含List)去重复在日常工作中经常遇到,很多时候用到Set数据结构,但有时候我们需要针对数据进行干预,这时候就需要用其他的实现方式了.以下列出各种的去重方式,基本含括了所有情况. 源码下载 ...