二级菜单--简单
程序员文章站
2022-06-01 18:14:36
...
默认打开页面进来时二级菜单是隐藏的，
需要点击才能展现二级菜单，再点击就是隐藏二级菜单。
这里有两个点，
实现展现和隐藏用display="block"和display=“none”,
另外就是要做一个判断，
if else的判断当前是block还是none。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#sub_menu_1,#sub_menu_2{
display: none;
}
ul li:hover{
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li onclick = "f('sub_menu_1')">一级菜单1
<ul id="sub_menu_1">
<li>二级餐单1</li>
<li>二级餐单1</li>
<li>二级餐单1</li>
<li>二级餐单1</li>
</ul>
</li>
<li onclick="f('sub_menu_2')">一级菜单2
<ul id="sub_menu_2">
<li>二级菜单2</li>
<li>二级菜单2</li>
<li>二级菜单2</li>
<li>二级菜单2</li>
</ul>
</li>
<li>一级餐单3</li>
</ul>
<script type="text/javascript">
function f(str){
var sub_menu = document.getElementById(str);
var dis_v = sub_menu.style.display;
if(dis_v == "block")
sub_menu.style.display = "none";
else
sub_menu.style.display = "block";
}
</script>
</body>
</html>
上一篇： 原生JS制作二级菜单+轮播图效果