本文介绍如何使用纯JavaScript实现一个简易的二级菜单交互效果。通过监听点击事件，控制子菜单的显示与隐藏，并在选中子项时更新主菜单的文本内容。代码包含HTML结构、CSS样式及JS逻辑，适合前端初学者参考学习。
纯JS实现二级菜单点击切换效果
本文分享了一段使用JavaScript实现二级菜单交互效果的完整代码，供读者参考学习。
该示例展示了如何通过点击事件触发二级菜单的显示，并在选中二级菜单项后，将主菜单的标题更新为所选二级菜单的内容。
具体实现包括点击主菜单展开二级列表，以及点击二级列表项后收起列表并更新主菜单文本的逻辑。
<style>
*{
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;
}
</style>
</head>
<body>
<div class="yiji" onclick="Show('erji2')">首页</div>
<div id="erji2">
<div class="erji1">1</div>
<div class="erji1">1</div>
<div class="erji1">1</div>
</div>
<div class="yiji" onclick="Show('erji3')">人才</div>
<div id="erji3">
<div class="erji1">1</div>
<div class="erji1">1</div>
<div class="erji1">1</div>
</div>
<div class="yiji" onclick="Show('erji4')">市场</div>
<div id="erji4">
<div class="erji1">1</div>
<div class="erji1">1</div>
<div class="erji1">1</div>
</div>
</body>
<script type="text/javascript">
function Show(a)
{
var a = document.getElementById(a);
if(a.style.display == "block")
{
a.style.display = "none";
}
else
{
a.style.display = "block";
}
}
</script> 
#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;
}
<div style="width:200px; height:400px;">
<div id="caidan" onclick="Show()">中国</div>
<div class="list" onclick="Xuan(this)">山东</div>
<div class="list" onclick="Xuan(this)">济南</div>
<div class="list" onclick="Xuan(this)">济宁</div>
<div class="list" onclick="Xuan(this)">威海</div>
<div class="list" onclick="Xuan(this)">淄博</div>
</div>
function Show()
{
var list = document.getElementsByClassName("list");
//显示列表
for(var i=0;i<list.length;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.length;i++)
{
list[i].style.display = "none";
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。