html二级菜单需要js吗,用纯JS实现二级菜单效果

本文实例为大家分享了JS实现二级菜单效果的具体代码，供大家参考，具体内容如下

js点击出现二级菜单，点击二级菜单主菜单换成二级菜单

点击出现二级菜单

*{

margin:0px auto;

padding:0px;

}

.yiji{

width:200px;

height:40px;

background-color:red;

color:#fff;

text-align:center;

line-height:40px;h

vertical-align:middle;

border:1px solid #FFF;

}

.erji1{

width:200px;

height:40px;

background-color:#F63;

color:#fff;

text-align:center;

line-height:40px;

vertical-align:middle;

border:1px solid #FFF;

}

#erji2{

display:none;

}

#erji3{

display:none;

}

#erji4{

display:none;

}

首页

1

1

1

人才

1

1

1

市场

1

1

1

function Show(a)

{

var a = document.getElementById(a);

if(a.style.display == "block")

{

a.style.display = "none";

}

else

{

a.style.display = "block";

}

}

#caidan{

width:200px;

height:40px;

border:1px solid #999;

text-align:center;

line-height:40px;

vertical-align:middle;

}

.list{

width:200px;

height:40px;

border:1px solid #999;

border-top-width:0px;

text-align:center;

line-height:40px;

vertical-align:middle;

display:none;

}

#caidan,.list:hover{

cursor:pointer;

}

.list:hover{

background-color:#63F;

}

中国

山东

济南

济宁

威海

淄博

function Show()

{

var list = document.getElementsByClassName("list");

//显示列表

for(var i=0;i

{

list[i].style.display = "block";

}

}

function Xuan(a)

{

var c = document.getElementById("caidan");

c.innerHTML = a.innerHTML;

var list = document.getElementsByClassName("list");

//显示列表

for(var i=0;i

{

list[i].style.display = "none";

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。