二级菜单原生js实现
今天莫名其妙想用原生js实现二级菜单，之前用jquery感觉挺简单的，但是jquery好久没用了，试着用原生的js实现一下。
首先用nodeName判断子节点为li元素，然后就有二种实现方式
1.item.style.display用none和block进行菜单伸缩
这种方式挺常见的，但是一开始判断display的值要考虑多一些，因为这种方式加css是直接加到标签上的。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
display: none;
}
</style>
</head>
<body>
<ul>电视剧
<li>鹤唳华亭</li>
<li>仙剑奇侠传</li>
<li>诛仙</li>
</ul>
<ul>电影
<li>钢铁侠</li>
<li>大鱼海棠</li>
<li>阿甘正传</li>
</ul>
<ul>小说
<li>红楼梦</li>
<li>倚天屠龙记</li>
<li>神雕侠侣</li>
</ul>
</body>
<script>
let oul=document.getElementsByTagName("ul");
for(let j=0;j<oul.length;j++){
oul[j].addEventListener("click",function(){
let son=Array.from(this.childNodes).filter(item=>item.nodeName.toLowerCase()=='li')
// 第一种方式
son.forEach(item=>{
if(item.style.display==='none'){
item.style.display='block';
}
// 这种方式改变style的值是直接上标签的css
else if(item.style.display===''){
item.style.display='block';
}
else{
item.style.display='none';
}
});
})
}
</script>
</html>
第二种是点击一级菜单给其子元素加一个类activeli，再次点击则删除该类
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
display: none;
}
.activeli{
display: block;
}
</style>
</head>
<body>
<ul>电视剧
<li>鹤唳华亭</li>
<li>仙剑奇侠传</li>
<li>诛仙</li>
</ul>
<ul>电影
<li>钢铁侠</li>
<li>大鱼海棠</li>
<li>阿甘正传</li>
</ul>
<ul>小说
<li>红楼梦</li>
<li>倚天屠龙记</li>
<li>神雕侠侣</li>
</ul>
</body>
<script>
let oul=document.getElementsByTagName("ul");
for(let j=0;j<oul.length;j++){
oul[j].addEventListener("click",function(){
let son=Array.from(this.childNodes).filter(item=>item.nodeName.toLowerCase()=='li');
son.forEach(item=>{
// 也可以直接用item.classList.contains()
if(!Array.from(item.classList).some(item=>item==="activeli")){
item.classList.add('activeli');
}else{
item.classList.remove('activeli')
}
})
})
}
</script>
</html>
二级菜单原生js实现相关推荐
- html一级二级菜单,纯JS添加一级二级菜单的代码
前提条件,页面中有一个ID为MyMenu的div对象.同时,相应的属性设置如下: .MyMenuFirst ul{list-style-type:none; margin:0px;margin-lef ...
- 仿百度的下拉菜单原生js
废话不多说直接上demo 登录 微博登录 百度登录 网易登录 设置 微博登录 百度登录 网易登录 学术 微博登录 百度登录 网易登录 js如下:注释的是最不用动脑子的想法:没有注释就涉及到闭包的问题, ...
- 原生JS制作自动+手动轮播图，附带二级分类菜单
原生JS制作自动+手动轮播图,附带二级分类菜单 包含以下功能: 1.鼠标移开自动轮播 2.鼠标移入停止自动轮播 3.点击左右按钮可手动切换图片 4.点击索引小圆点可手动切换图片 5.鼠标移入一级菜单展 ...
- html点击展开菜单,简单实现js点击展开二级菜单功能
虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的.我最近就遇到做 ...
- 动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
- 原生JS实现苹果菜单
今天分享下用原生JS实现苹果菜单效果,这个效果的重点有以下几点 图标中心点到鼠标的距离的算法 利用比例计算图标的宽度 代码地址:https://github.com/peng666/blogs/blo ...
- vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码?
郎朗坤 废话不多说了,直接给大家贴代码了,完整代码: vue点击切换显示隐藏 {{item.name}} {{subItem.name}} 以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐 ...
- 第四篇 bonus：js代码实现网页导航二级菜单
第四篇 bonus:js代码实现网页导航二级菜单 由于小猪蹄子说想学习一些和爬虫相关的东西,所以我让她去看看requests这个库,非常的人性化,可以非常方便的实现常用的爬虫功能.但是小猪蹄子看了以后 ...
- 前端----HTML/JS 鼠标停留和移开实例----鼠标指示时显示二级菜单(共三级)
onmouseover和onmouseout事件和各种position定位的练习, 效果是鼠标指示一级菜单显示二级菜单, 指示二级菜单的选项出现相应三级菜单 效果图: 一级菜单: 鼠标停留时的二级菜: ...
最新文章
- PendingIntent详解
- myeclispse配置自己的jdk和tomcat
- Dataset之图片数据增强：设计自动生成汽车车牌图片算法(cv2+PIL)根据随机指定七个字符生成逼真车牌图片数据集(自然场景下+各种噪声效果)可视化
- CodeForces - 1465E Poman Numbers(推公式+贪心)
- c# datagridviewcomboboxcell值无效的解决办法
- Bash中执行存储过程或普通的SQL命令
- Sudoku Killer（HDU-1426）
- 穿山甲插屏广告居中_穿山甲跻身广告联盟头部阵营 如何实现增量创新？
- Django之ORM字段和参数
- 乱码翻译器在线翻译_GAL党的福音——开源生肉翻译器MisakaTranslator正式版发布...
- APP软件半成品测试技巧
- 在unity中使用Excel表格
- 2017年中国网络安全报告
- python之parser.add_argument()用法——命令行选项、参数和子命令解析器
- 【图像处理】双线性插值法扩展图像像素及其代码实现（亚像素）
- 第一、二、三代半导体的区别在哪里？
- mac鼠标不能双击打开文件夹的解决方法
- 艾司博讯：拼多多价格竞争力不足怎么办
- linux文件查找命令
- Android studio Build时，Download maven-metadata.xml卡住不动的问题