JS+CSS實(shí)現(xiàn)的簡(jiǎn)單折疊展開多級(jí)菜單效果
更新時(shí)間：2015年09月12日 15:39:36 作者：企鵝
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的簡(jiǎn)單折疊展開多級(jí)菜單效果,涉及JavaScript頁(yè)面元素的遍歷及動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS+CSS實(shí)現(xiàn)的可折疊展開多級(jí)菜單效果。分享給大家供大家參考。具體如下：
這是一款JS+CSS實(shí)現(xiàn)的多級(jí)折疊菜單，可折疊展開/合攏，沒有引用任何的外部文件，也沒有用到圖片，雖然簡(jiǎn)單，而且還有些粗糙，但核心的東西已經(jīng)展示給大家了，正在研究折疊菜單的朋友們，這一個(gè)小例子可能正是你需要的，好好研究一下吧。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-css-simple-zdzk-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>
<title>折疊菜單</title>
<style>
#side_nav ul{display:none}
</style>
</head>
<body>
<ul id="side_nav">
<li><span>菜單1</span>
<ul>
<li><a href="#">菜單1-0</a></li>
<li><a href="#">菜單1-1</a></li>
</ul>
</li>
<li><span>菜單2</span>
<ul>
<li><a href="#">菜單2-0</a></li>
<li><a href="#">菜單2-1</a></li>
</ul>
</li>
<li><span>菜單3</span>
<ul>
<li><a href="#">菜單3-0</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
<!--
(function(){
var navWrap=document.getElementById("side_nav");
var nav1s=navWrap.getElementsByTagName("span");
var nav2s=navWrap.getElementsByTagName("ul");
for(var i=0,len=nav1s.length;i<len;i++){
nav1s[i].onclick=(function(i){
return function(){
for(var j=0;j<len;j++){
nav2s[j].style.display="none";
}
nav2s[i].style.display="block";
}
})(i)
}
})()
//-->
</script>
</body>
</html>
希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript實(shí)現(xiàn)表單提交后，提交按鈕不可用的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)表單提交后，提交按鈕不可用的方法,涉及javascript動(dòng)態(tài)修改表單樣式的技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JS請(qǐng)求servlet功能,結(jié)合具體實(shí)例形式分析了javascript使用ajax請(qǐng)求servlet端響應(yīng)的主要功能代碼與相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
javascript模擬實(shí)現(xiàn)C# String.format函數(shù)功能代碼
這篇文章主要介紹了javascript模擬實(shí)現(xiàn)C# String.format函數(shù)功能,相信大家可以用的到2013-11-11
JS實(shí)現(xiàn)canvas仿ps橡皮擦刮卡效果詳解
這篇文章主要為大家詳細(xì)介紹了使用js中的Canvas實(shí)現(xiàn)橡皮擦效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
JavaScript中的FileReader圖片預(yù)覽上傳功能實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了js中的FileReader圖片預(yù)覽上傳功能，代碼分為html和js代碼兩部分，具體實(shí)現(xiàn)代碼大家參考下本文2017-07-07
本文對(duì)JS判斷鼠標(biāo)移入元素的方向的實(shí)現(xiàn)方法進(jìn)行介紹，并分享了完整的示例代碼，有需要的朋友可以看下2016-12-12
JavaScript利用閉包實(shí)現(xiàn)模塊化
本文主要介紹了JavaScript利用閉包實(shí)現(xiàn)模塊化的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
JS遍歷Json字符串中鍵值對(duì)先轉(zhuǎn)成JSON對(duì)象再遍歷
這篇文章主要介紹了JS遍歷Json字符串中鍵值對(duì)的方法,先將Json字符串轉(zhuǎn)換成JSON對(duì)象，再進(jìn)行遍歷，需要的朋友可以參考下2014-08-08
JS+CSS實(shí)現(xiàn)仿msn風(fēng)格選項(xiàng)卡效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿msn風(fēng)格選項(xiàng)卡效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素css樣式實(shí)現(xiàn)切換功能的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
ES6提供了大量新的好的東西，在過去的一年內(nèi)，瀏覽器提供商做了大量的辛勤工作將新的語(yǔ)言特性更新到他們的瀏覽器中。盡管有重大的更新，很多小的語(yǔ)言更新另我眼前一亮，下面這篇文章主要介紹了關(guān)于ES6的六個(gè)小特性,需要的朋友可以參考下。2017-02-02