工作中遇到了需要动态切换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函数编写的更多相关文章

  1. html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

    Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...

  2. js原生之函数

    1.函数作为参数传给其他函数:    data.sort(function(a,b){return a-b})    //关于数组的sort函数,其回调函数返回负值,a在b之前    //正值,b在a ...

  3. 关于JS的clone()函数编写的一些问题

    问题讲述:用js 实现一个clone()克隆函数,该函数会把输入进去的不同类型值Number,String,Undefined,Boolean,Function,Null,Object,Array,R ...

  4. js原生的url操作函数,及使用方法。(附:下边还有jquery对url里的中文解码函数)

    js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...

  5. js原生函数一些封装

    这是一些js原生封装的函数,主要是为了兼容IE浏览器,如下 获取css样式 function getStyle(ele, prop) { if(window.getComputedStyle) { r ...

  6. 15、js 原生基础总结

    Day1 一.什么是JS?   ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...

  7. js原生高逼格插件

    如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...

  8. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  9. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  10. js产生随机数函数

    函数: //产生随机数函数 function RndNum(n){ var rnd=""; for(var i=0;i<n;i++) rnd+=Math.floor(Math ...

随机推荐

  1. 分布式机器学习(Parameter Server)

    分布式机器学习中,参数服务器(Parameter Server)用于管理和共享模型参数,其基本思想是将模型参数存储在一个或多个中央服务器上,并通过网络将这些参数共享给参与训练的各个计算节点.每个计算节 ...

  2. 快速上手kettle(二)小试牛刀

    目录 一 .前言 二 .两个小目标 三. kettle核心概念介绍 3.1 转换 3.1.1 步骤(Step) 3.1.2 跳(Hop) 3.1.3 元素据 3.1.4 数据类型 3.1.5 并发执行 ...

  3. 500行代码手写docker-实现硬件资源限制cgroups

    (5)500行代码手写docker-实现硬件资源限制cgroups 本系列教程主要是为了弄清楚容器化的原理,纸上得来终觉浅,绝知此事要躬行,理论始终不及动手实践来的深刻,所以这个系列会用go语言实现一 ...

  4. kprobe_events shell模式使用教程

    kprobe_events shell模式使用教程 kprobe 使用前提 需要内核启用以下配置 CONFIG_KPROBES=y CONFIG_HAVE_KPROBES=y CONFIG_KPROB ...

  5. 拒绝conda, 用virtualenv构建多版本的python开发环境

    本文章转载自公众号 "生信码农笔记(ID:bio-coder)",已获得原作者授权. 1. 不喜欢用 conda 特别不喜欢 bioconda, miniconda, Anacon ...

  6. @Target元注解的使用

    @Target注解标记另外的注解用于限制此注解可以应用哪种Java元素类型.先看Java SE 8中@Target是如何声明的: package java.lang.annotation; publi ...

  7. Tab切换以及倒计时组件封装

    1.Tab组件 功能 支持默认选中tab 子元素可以是文本或者图片 自定义tab的数量,并自适应展示 实现方式 用ul > li标签遍历传入的tabs数组参数渲染 判断是否传入背景,未传则显示文 ...

  8. uniapp-chatgpt跨端仿ChatGPT实例|uniapp+vue3+pinia多端聊天模板

    基于uniapp+vite4+pinia跨多端实现chatgpt会话模板Uniapp-ChatGPT. uni-chatgpt 使用uni-app+vite4+vue3+pinia+uview-plu ...

  9. 添加.gitignore不生效问题

    1. 解决.gitignore不生效问题 把某些目录或文件加入忽略规则,按照上述方法定义后发现并未生效,原因是.gitignore只能忽略那些原来没有被追踪的文件,如果某些文件已经被纳入了版本管理中, ...

  10. 【WebRtc】获取音视频数据

    首页截图 获取音视频 关键Code 获取摄像头数据 /** * 获取流数据 */ openUserMeida() { var that = this // 判断是否支持获取媒体数据 if (!navi ...