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è)試，覺(jué)得有用處的自己測(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)文章
el表達(dá)式 寫入bootstrap表格數(shù)據(jù)頁(yè)面的實(shí)例代碼
這篇文章主要介紹了el表達(dá)式 寫入bootstrap表格數(shù)據(jù)頁(yè)面的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-01-01
js定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
JS字符串與二進(jìn)制的相互轉(zhuǎn)化實(shí)例代碼詳解
這篇文章主要介紹了JS字符串與二進(jìn)制的相互轉(zhuǎn)化 ,在文中給大家提到了Js之字符串和字節(jié)碼之間的相互轉(zhuǎn)換，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
這篇文章介紹了JavaScript中的字符串操作，有需要的朋友可以參考一下2013-11-11
javascript實(shí)現(xiàn)的動(dòng)態(tài)添加表單元素input,button等(appendChild)
這篇文章給大家介紹了javascript實(shí)現(xiàn)的動(dòng)態(tài)添加表單元素input,button等(appendChild)的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2007-11-11
我們?cè)陂_發(fā)中常遇到一種情況,在創(chuàng)建一個(gè)元素之后,需要給它綁定事件,這篇文章主要給大家介紹了關(guān)于js為新添加元素添加綁定事件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了一些你不知道的JavaScript閉包相關(guān)知識(shí)，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定幫助，感興趣的可以跟隨小編一起學(xué)習(xí)一下2022-11-11
JavaScript常見的跨標(biāo)簽頁(yè)通信方式總結(jié)
跨標(biāo)簽頁(yè)通信是指在瀏覽器中的不同標(biāo)簽頁(yè)之間進(jìn)行數(shù)據(jù)傳遞和通信的過(guò)程,這篇文章為大家整理了前端常見的跨標(biāo)簽頁(yè)通信方式,有需要的小伙伴可以了解下2023-10-10
js 獲取當(dāng)前web應(yīng)用的上下文路徑實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 獲取當(dāng)前web應(yīng)用的上下文路徑實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
JavaScript中setInterval()用法舉例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中setInterval()用法的相關(guān)資料,setInterval()方法可按照指定的周期(以毫秒計(jì))來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10