6. HTML DOM
b. 選單開合操作範例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>HTML DOM 選單開合操作</title>
<script type="text/javascript">
//alert("hello");
function toggleMenu(number){
var menu = document.getElementById("menu-" + number);
menu.classList.toggle("hide");//切換標簽物件class的 hide的設定
/* if(menu.style.display == "none"){// 目前是none
menu.style.display = "block";
}else{
menu.style.display = "none";// 目前是block
}*/
}
</script>
<style type = "text/css">
.hide{display:none;}
</style>
</head>
<body>
<div onclick = "toggleMenu(1);">florence1</div>
<ul id = "menu-1">
<li>1-0825</li>
<li>1-0826</li>
<li>1-0827</li>
</ul>
<div onclick = "toggleMenu(2);">florence2</div>
<ul id = "menu-2">
<li>2-0825</li>
<li>2-0826</li>
<li>2-0827</li>
</ul>
<div onclick = "toggleMenu(3);">florence3</div>
<ul id = "menu-3">
<li>3-0825</li>
<li>3-0826</li>
</ul>
</body>
</html>