工作中遇到了需要动态切换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. R 语言柱状图示例笔记

    由于微信不允许外部链接,你需要点击文章尾部左下角的 "阅读原文",才能访问文章中链接. 一.基础柱状图 1. barplot 命令 基于barplot基础柱状图颜色.方向及分组的绘 ...

  2. Mybatis的parameterType造成线程阻塞问题分析

    一.前言 最近在新发布某个项目上线时,每次重启都会收到机器的 CPU 使用率告警,查看对应监控,持续时长达 5 分钟,对于服务重启有很大风险.而该项目有非常多 Consumer 消费,服务启动后会有大 ...

  3. 02-面试必会-SSM框架篇

    01-什么是 Spring IOC 和 DI ? IOC : 控制翻转 , 它把传统上由程序代码直接操控的对象的调用权交给容 器,通过容器来实现对象组件的装配和管理.所谓的"控制反转&quo ...

  4. Ryu控制器教程

    RYU不要使用apt的方法安装,这样的安装是不完整的, 并且相关文件不易查找. 1.下载ryu源码 cd cd Desktop git clone https://gitee.com/lpm-123/ ...

  5. CPU性能指标介绍及分析

    CPU是计算机系统中最核心的组件之一,对系统性能起着至关重要的作用.以下是一些常见的CPU性能指标及其分析: 1. %user(用户态)和 %system(内核态) %user:表示CPU花费在用户进 ...

  6. Hello-FPGA CoaXPress 2.0 FPGA HOST IP Core Demo User Manual

    目录 Hello-FPGA CoaXPress 2.0 Host FPGA IP Core Demo 4 1 说明 4 2 设备连接 5 3 VIVADO FPGA工程 6 4 SDK工程 9 图 1 ...

  7. 浅析华为云Astro的5大关键能力技术

    摘要:本文以技术方案视角,对华为云Astro低代码平台的一些核心功能进行简要介绍. 背景介绍 低代码开发基于可视化开发的概念,结合了云原生和多终端体验技术,它可以在大多数业务场景中,帮助企业显著的提升 ...

  8. 与 AI 同行,利用 ChatGLM 构建知识图谱

    大家好,我是东方财富的一名算法工程师,这里分享一些利用大模型赋能知识图谱建设的一些实践. 为什么知识图谱需要大模型 在金融场景中,天然会有大量结构化的数据需要投入大量的人力去生产和维护,而这样的数据又 ...

  9. 图像增强—自适应直方图均衡化(AHE)-限制对比度自适应直方图均衡(CLAHE)

    一.自适应直方图均衡化(Adaptive histgram equalization/AHE) 1.简述 自适应直方图均衡化(AHE)用来提升图像的对比度的一种计算机图像处理技术.和普通的直方图均衡算 ...

  10. 编码技巧 --- 使用dynamic简化反射

    引言 dynamic 是 Framework 4.0 就出现特性,它的出现让 C# 具有了弱语言类型的特性.编译器在编译的时候不再对类型进行检查,默认 dynamic 对象支持开发者想要的任何特性. ...