技术标签： css 前端 html javascript jquery
今天莫名其妙想用原生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>
文章浏览阅读234次，点赞4次，收藏9次。在MATLAB光伏并网仿真模型中，可以基于光伏发电逆变器的工作特性和电路参数，模拟光伏电池组的发电情况，实现逆变器的精确控制和工作状态监测。其次，输电线路是光伏电站与电网之间的连接通道。在MATLAB光伏并网仿真模型中，可以建立输电线路的数学模型，考虑线路的电阻、电感和电容等参数，模拟输电过程中的电压降和电流波动等情况，以评估并网运行中的电能质量。MATLAB光伏并网仿真模型，在Matlab中建立光伏电站接入系统模型，包括光伏发电逆变器及负荷模型等，仿真分析接入点处的电能质量，实现高品质并网运行。
文章浏览阅读345次。使用C++编程软件完成题目_数字求和c++
文章浏览阅读1.5k次。1、左连接：var LeftJoin = from emp in ListOfEmployeesjoin dept in ListOfDepartmenton emp.DeptID equals dept.ID into JoinedEmpDeptfrom dept in JoinedEmpDept.DefaultIfEmpty()select new {EmployeeName = emp.Name,DepartmentName = dept _c# linq left join
文章浏览阅读5.9k次。这篇笔记涉及 阿里云CoAP接入，其他物联网应用协议学习笔记可点此查看。1 开通物联网套件本节内容主要来自于阿里云官网，阿里云物联网套件 &amp;amp;amp;amp;amp;gt; 快速开始 &amp;amp;amp;amp;amp;gt; 高级版快速开始 &amp;amp;amp;amp;amp;gt; 开发准备。开通之前先看看阿里云怎么收费。100万条消息收费3.6元每月赠送100万消息数，从当_哪些云平台支持coap
文章浏览阅读2k次，点赞5次，收藏24次。文章目录论文学习Iterative Deep AggregationHierarchical Deep Aggregation网络结构![在这里插入图片描述](https://img-blog.csdnimg.cn/fb147ce654a845abb19414a581008bd3.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5qOu5bC85aup6LGG6IWQ,size_20,_dla 34论文
文章浏览阅读651次。苹果手机图片黑白互换Three weeks ago I was working on my iMac on a Saturday morning and the display went crazy, forcing me to restart. I did some searching and discovered that this was a known issue, and that Ap..._mac 照片 黑白交换
文章浏览阅读242次。一、背景 在使用美团的mpvue2.0框架搭建起小程序项目后，做获取用户信息时遇到一些问题：微信小程序更新api后，获取用户信息只能通过button上的绑定方法 来获取用户信息，vue上方法绑定不能直接使用，下面是修改配置mpvue的步骤vue中代码：<template> <div> <button open-type="getUserI..._小程序开发获取美团app乘车数据授权
文章浏览阅读1.1k次。时间增加一分钟（Python）_python 时间加分钟
文章浏览阅读382次。我将分上下两节来带大家了解JVM的内存管理机制只要是Java程序员估计都体验过程序中的内存泄漏和OOM异常吧。为了剖析这类问题，理解JVM内存及其管理的内容和方式是极其重要的。JVM的一大优点是内存的自动管理。什么是内存管理内存管理就是一种管理对象的分配和回收的机制。JVM内的这种自动内存管理是由一个名为垃圾回收器(Garbage Collector)的系统执行的。自动内存管理是如何工作的JVM中..._jvm 直接内存 元空间
文章浏览阅读372次。接口的幂等性是什么？直接百度就可以出来，百度百科中是这么解释幂等的，在编程中一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同。那么在我们平时开发的时候这种接口幂等性遇到的多么？我经历的这几家公司差不多每次都会遇到这种因为多次操作导致接口不幂等的情况，每次也很无奈的去直接操作数据库，把多余的数据删除了。前端时间，我所负责的一个业务就出现了接口频繁操作，导致数据重复的情况，而且持续了好长一段时间，测试大佬们也每天都在催着我解决这个问题。等我看完代码的时候我发现，我在核心的代码里面_怎么防止幂等
文章浏览阅读817次。百度地图 将google坐标转成百度坐标_怎样把手机谷歌定位换成百度定位
文章浏览阅读157次。来自：YeungNLP进NLP群—>加入NLP交流群01前言在过去的几个月里，经过不断的迭代更新，Firefly项目已支持对LLaMA-2、Ziya、Baichuan、InternLM、LLaMA-1、Bloom等模型进行指令微调，并且开源了多个经过中文指令微调的模型权重，获得了很多同学的支持。目前本项目在Github上获得了1100+star️，感谢大家的关注和支持。此前，我们花了较多精...