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

更新時(shí)間：2015年09月01日 14:45:31 作者：企鵝

這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊向下展開的下拉菜單效果代碼,涉及javascript鼠標(biāo)事件控制頁(yè)面元素樣式變換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

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

這里介紹js實(shí)現(xiàn)點(diǎn)擊向下展開的下拉菜單特效代碼，無(wú)調(diào)用jQuery，真正的JS下拉菜單，兼容性方面未做測(cè)試，覺得有用處的自己測(cè)試修正吧，本文僅提供基礎(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>

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

您可能感興趣的文章:

相關(guān)文章

詳解bootstrap-fileinput文件上傳控件的親身實(shí)踐
這篇文章主要介紹了詳解bootstrap-fileinput文件上傳控件的親身實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2019-03-03
JavaScript中讀取和保存文件實(shí)例
這篇文章主要介紹了JavaScript中讀取和保存文件實(shí)例,使用HTML5 File API實(shí)現(xiàn),需要的朋友可以參考下
2014-05-05
ie和firefox不兼容的解決方法集合
網(wǎng)頁(yè)設(shè)計(jì)很多情況下，需要注意ie跟firefox的不同區(qū)別，腳本之家提供了不好這樣的文章，大家可以好好看下。
2009-04-04
js實(shí)現(xiàn)文字滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)文字滾動(dòng)效果，類似于新聞板塊中的公示公告，，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-03-03
isArray()函數(shù)(JavaScript中對(duì)象類型判斷的幾種方法)
我們知道，JavaScript中檢測(cè)對(duì)象類型的運(yùn)算符有：typeof、instanceof，還有對(duì)象的constructor屬性
2009-11-11
javascript attachEvent綁定多個(gè)事件執(zhí)行順序問題
執(zhí)行順序是沒有規(guī)律的，但是每次執(zhí)行的順序是一樣的，如果是隨機(jī)那么應(yīng)該每次執(zhí)行的順序都不一樣才對(duì)，這才是我想要說(shuō)明的
2010-10-10
JavaScript表單驗(yàn)證實(shí)例之驗(yàn)證表單項(xiàng)是否為空
表單驗(yàn)證幾乎在每個(gè)需要注冊(cè)或者是登錄的網(wǎng)站都是必不可少，下面通過本篇文章給大家介紹JavaScript表單驗(yàn)證實(shí)例之驗(yàn)證表單項(xiàng)是否為空，涉及到j(luò)s表單驗(yàn)證實(shí)例相關(guān)知識(shí)，對(duì)js表單驗(yàn)證實(shí)例代碼需要的朋友一起學(xué)習(xí)吧
2016-01-01
詳解promise.then,process.nextTick, setTimeout 以及 setImmediate的
這篇文章主要介紹了詳解promise.then,process.nextTick, setTimeout 以及 setImmediate的執(zhí)行順序
2018-11-11
在js代碼拼接dom對(duì)象到頁(yè)面上去的模板總結(jié)(必看)
下面小編就為大家?guī)?lái)一篇在js代碼拼接dom對(duì)象到頁(yè)面上去的模板總結(jié)(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-02-02
JAVASCRIPT下判斷IE與FF的比較簡(jiǎn)單的方式
在JAVASCRIPT當(dāng)中可以通過取當(dāng)前瀏覽器返回值來(lái)判斷當(dāng)前使用什么瀏覽器。
2008-10-10