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 ...
随机推荐
- odoo开发教程九:Odoo10 API
一:纪录集API model中的数据是以集合的形式使用的,因此可以使用集合运算来操作. 集合运算符 record in set返回record是否在set中,record须为单条记录,record n ...
- Vue——前端发展史、Vue介绍和使用、插值语法、文本指令、事件指令
前端的发展史 # 1 HTML(5).CSS(3).JavaScript(ES5.ES6):编写一个个的页面 -> 给后端(PHP.Python.Go.Java) -> 后端嵌入模板语法 ...
- @Retention元注解的使用
@Retention注解标记其他的注解用于指明标记的注解保留策略:先看Java SE 8中@Target是如何声明的: package java.lang.annotation; public enu ...
- 【Netty】02-入门
二. Netty 入门 1. 概述 1.1 Netty 是什么? Netty is an asynchronous event-driven network application framework ...
- 免杀系列之利用blockdlls和ACG保护恶意进程
blockdlls Cobalt Strike 3.14版本以后添加了blockdlls功能,它将创建一个子进程并限定该子进程只能加载带有Microsoft签名的DLL. 这个功能可以阻止第三方安全软 ...
- FFmpeg合并视频和音频文件
使用IDM下载Bilibili的视频会出现音视频分离的问题,通常文件大的是视频(没有声音),文件小的是单独的音频. 将两个文件都下载下来后,可以使用FFmpeg将其合并成一个视频文件.首先去FFmpe ...
- 【笔试实战】LeetCode题单刷题-编程基础 0 到 1【一】
1768. 交替合并字符串 题目链接 1768. 交替合并字符串 题目描述 给你两个字符串 word1 和 word2 .请你从 word1 开始,通过交替添加字母来合并字符串.如果一个字符串比另一个 ...
- Vue + Volo.Abp 实现Auth2.0客户端授权模式认证
@ 目录 注册Client Auth2.0授权 创建vue-oidc-client 创建Auth2.0认证跳转 获取令牌 创建回调页面 创建退出登录 最终效果 Volo.Abp的身份服务器模块默认使用 ...
- java后台导出表格文件
Java类所需jar包 import java.io.File; import java.io.IOException; import java.io.InputStream; import java ...
- 给程序员准备的“蜜糍”--SOD框架简介
注:本文是SOD框架源码仓库的首页介绍,原文地址 一.框架介绍 1,SOD框架是什么? 以前有一个著名的国产化妆品"大宝SOD密",SOD框架虽然跟它没有什么关系,但是名字的确受到 ...