js 实现左侧菜单二级下拉菜单,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS实现下拉菜单</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#div1 {
width: 200px;
margin: 0 auto;
line-height: 25px;
}
ul {
list-style: none;
}
li {
background: #ccc;
margin-bottom: 3px;
}
dl {
background: #eee;
display: none;
}
.active {
background: #F90;
}
dd:hover {
background: red;
}
</style>
</head>
<body>
<div id="div1">
<ul id="menu">
<li class="active">菜单1</li>
<dl>
<dd>菜单1.1</dd>
<dd>菜单1.2</dd>
<dd>菜单1.3</dd>
<dd>菜单1.4</dd>
</dl>
<li class="active">菜单2</li>
<dl>
<dd>菜单2.1</dd>
<dd>菜单2.2</dd>
<dd>菜单2.3</dd>
<dd>菜单2.4</dd>
</dl>
<li class="active" onclick="on(idt)">菜单3</li>
<dl id="idt">
<dd>菜单3.1</dd>
<dd>菜单3.2</dd>
<dd>菜单3.3</dd>
<dd>菜单3.4</dd>
</dl>
</ul>
</div>
</body>
<script type="text/javascript">
var odiv1 = document.getElementById("div1");
var oli = odiv1.getElementsByTagName("li");
var odl = odiv1.getElementsByTagName("dl");
for(var i = 0; i < oli.length; i++) {
oli[i].tag = true
oli[i].index = i;
oli[i].onclick = function() {
for(var j = 0; j < oli.length; j++) {
if(this.index != j) {
oli[j].tag = true
}
oli[j].className = '';
odl[j].style.display = 'none';
}
this.className = "active";
if(this.tag) {
odl[this.index].style.display = "block";
this.tag = !this.tag;
} else {
odl[this.index].style.display = "none";
this.tag = !this.tag;
}
}
}
</script>
</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/0661f578115d4d6c88138fa4a54ef20c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVnVlMTAyNA==,size_16,color_FFFFFF,t_70,g_se,x_16#pic_center)