在我們的寫前端程序的時候，經常會遇到要使用樹形菜單或者下拉菜單的地方，這裏我寫了一個樹形菜單。有一個知識點需要了解一下，就是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>