javascript隱藏下拉式選單的方法:先建立一個「demo.html」和「demo.css」;然後建立一個「demo.js」;最後透過「function hideSubMenu(li) {...} ”實現隱藏即可。

本文操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。
javascript如何隱藏下拉式選單?
javascript實作下拉選單的顯示與隱藏
demo.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>实现下拉菜单效果</title>
<link rel= "stylesheet" type= "text/css" href= "demo.css" >
<script type= "text/javascript" src= "demo.js" ></script>
</head>
<body>
<p id= "nav" >
<ul>
<li><a href= "#" >首页</a></li>
<li onmouseover= "displaySubMenu(this)" onmouseout= "hideSubMenu(this)" ><a href= "#" >课程大厅</a>
<ul>
<li><a href= "#" >JavaScript</a></li>
<li><a href= "#" >Html/CSS</a></li>
</ul>
</li>
<li onmouseover= "displaySubMenu(this)" onmouseout= "hideSubMenu(this)" ><a href= "#" >学习中心</a>
<ul>
<li><a href= "#" >视频学习</a></li>
<li><a href= "#" >实例练习</a></li>
<li><a href= "#" >问与答</a></li>
</ul>
</li>
<li><a href= "#" >经典案例</a></li>
<li><a href= "#" >关于我们</a></li>
</ul>
</p>
</body>
</html>
|
登入後複製
demo.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function displaySubMenu(li) {
var subMenu = li.getElementsByTagName( "ul" )[0];
subMenu.style.display = "block" ;
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName( "ul" )[0];
subMenu.style.display = "none" ;
}
|
登入後複製
demo.css
#
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | *{ margin:0px; padding:0px;}
body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}
#nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}
a{ text-decoration:none; color:#000; display:block;}
a:hover{ color:#F00; background-color:#666;}
ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}
ul li ul{ display:none;}
|
登入後複製
效果:

推薦學習:《javascript進階教學》
以上是javascript如何隱藏下拉式選單的詳細內容。更多資訊請關注PHP中文網其他相關文章!