工作中遇到了需要动态切换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. 第一课 使用开发者模式快速入门 Odoo 13

    Odoo提供了一个快速应用开发框架,非常适合创建商业应用.这类应用通常用于保留业务记录,增删改查操作.Odoo 不仅简化了这类应用的创建,还提供了看板.日历.图表等视图的丰富组件,用于创建好看的用户界 ...

  2. MySQL中字符串查询效率大比拼

    背景 最近有个同事对字符串加索引,加完后,发现多了个奇奇怪怪的数字执行的SQL如下: alter table string_index_test add index `idx_name` (`name ...

  3. 从源码分析 Go 语言使用 cgo 导致的线程增长

    TDengine Go 连接器 https://github.com/taosdata/driver-go 使用 cgo 调用 taos.so 中的 API,使用过程中发现线程数不断增长,本文从一个 ...

  4. 从0搭建Vue3组件库(九):VitePress 搭建部署组件库文档

    VitePress 搭建组件库文档 当我们组件库完成的时候,一个详细的使用文档是必不可少的.本篇文章将介绍如何使用 VitePress 快速搭建一个组件库文档站点并部署到GitHub上 安装 首先新建 ...

  5. Python的Lambda函数: 一把极简编程的瑞士军刀

    Python中的lambda函数,或者叫匿名函数,是一个极其强大的工具.它以简洁.优雅的语法提供了创建函数的快速方式.在本篇文章中,我们将全方位地深入研究lambda函数的用法和特点,通过理论和实例相 ...

  6. 「学习笔记」DP 学习笔记1

    序列 DP 一般序列 DP 核心思想:将序列的前 \(i\) 个数的状态用一个更简单的形式表示出,并且体现出这些状态对后续的影响. 题目 ABC 267D 给定一个序列 \(a\),找到一个长度为 \ ...

  7. 从源码级剖析Java类加载原理

    相信大多数熟悉Java的研发工程师,都知道Java类加载原理:Java中的类是由类加载器采用双亲委派机制进行加载.其中,Java核心库中实现了三种类型的类加载器,它们分别是:引导类加载器Bootstr ...

  8. 【大数据OLAP技术新书推荐】 字节跳动、阿里巴巴大厂资深架构师程序员多年实践经验总结《ClickHouse入门、实战与进阶》

    ClickHouse 领域集大成之作-ClickHouse 入门进阶实战的标准参考书-日常工作案头必备! 如果需要购买阅读的话,可以点击: https://item.jd.com/1007763561 ...

  9. 打包 IPA processing failed 失败

    查看报错日志:有些SDK含有x86_64架构,移除即可 1. cd 该库SDK路径下 2.执行 lipo -remove x86_64 BaiduTraceSDK -o BaiduTraceSDK 解 ...

  10. 上班第一天 Android 环境配置

    其实是昨天把大概 回归Android开发第一天 学会查 然后等待 反正我是不希望以后再查了 写出来吧 去谷歌那边把android studio下载下来 更新jdk版本(与传统的java开发不同 高版本 ...