在我们的写前端程序的时候，经常会遇到要使用树形菜单或者下拉菜单的地方，这里我写了一个树形菜单。有一个知识点需要了解一下，就是display和visibility的区别。简而言之，将元素的visibility属性设置成hidden之后，元素不可见但是元素所占据的位置依然存在，而将元素display属性设置成none之后，元素不可见并且不占据任何位置。现在网页为了在一定的空间里显示更多的信息一般使用的是display属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style: none;
width: 150px;
margin: 0px;
padding: 0px;
display: none;
}
ul li{
margin-top: 10px;
padding: 15px 20px;
background-color: chocolate;
}
</style>
</head>
<body>
<a id="car" href="javascript:show('carlist')">汽车</a>
<ul id="carlist">
<li>宝马</li>
<li>奔驰</li>
<li>大众</li>
<li>雷克萨斯</li>
</ul>
<br>
<!--注意这里函数的调用方式，这里调用ul id的时候只能用单引号-->
<a id="school" href="javascript:show('schoollist')">学校</a>
<ul id="schoollist">
<li>北京大学</li>
<li>清华大学</li>
<li>国防科技大学</li>
<li>厦门大学</li>
</ul>
</body>
<script>
function show(ele) {
// 下面的ele不要加单引号或者双引号,直接使用ele即可
if (document.getElementById(ele).style.display == "block"){
document.getElementById(ele).style.display = "none";
}else{
document.getElementById(ele).style.display = "block";
}
}
</script>
</html>