亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js實(shí)現(xiàn)點(diǎn)擊向下展開的下拉菜單效果代碼

 更新時(shí)間：2015年09月01日 14:45:31   作者：企鵝  
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊向下展開的下拉菜單效果代碼,涉及javascript鼠標(biāo)事件控制頁面元素樣式變換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)點(diǎn)擊向下展開的下拉菜單效果代碼。分享給大家供大家參考。具體如下：

這里介紹js實(shí)現(xiàn)點(diǎn)擊向下展開的下拉菜單特效代碼，無調(diào)用jQuery，真正的JS下拉菜單，兼容性方面未做測試，覺得有用處的自己測試修正吧，本文僅提供基礎(chǔ)的代碼供參考。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-click-show-down-menu-style-codes/

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉菜單</title>
<style type="text/css">
*{margin:0; padding:0}
#nav{width:200px; margin:50px}
#nav h3{ cursor:pointer; line-height:30px; height:30px; background-color:#000000; color:#fff}
#nav a{display:block; line-height:24px;color:#666666}
#nav a:hover{background-color:#eee; color:#000;}
#nav div{display:none; border:1px solid #000; border-top:none}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
window.onload = function(){
 $("nav").onclick = function(e){
 var src = e?e.target:event.srcElement;
 if(src.tagName == "H3"){
  var next = src.nextElementSibling || src.nextSibling;
  next.style.display = (next.style.display =="block")?"none":"block";
 }
 }
}
</script>
</head>
<body>
<div id="nav">
 <h3>管理區(qū)</h3>
  <div>
   <a href="#">建議</a>
    <a href="#">鏈接</a>
    <a href="#">聯(lián)系</a>
  </div>
  <h3>交流區(qū)</h3>
  <div>
   <a href="#">JavaScript</a>
    <a href="#">Delphi</a>
    <a href="#">VC++</a>
  </div>
</div>
</body>
</html>

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評論