這是一款JS+CSS實(shí)現(xiàn)的多級(jí)折疊菜單，可折疊展開(kāi)/合攏，沒(méi)有引用任何的外部文件，也沒(méi)有用到圖片，雖然簡(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)文章

typescript配置alias的詳細(xì)步驟
這篇文章主要介紹了typescript配置alias，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
ES6新特性之變量和字符串用法示例
這篇文章主要介紹了ES6新特性之變量和字符串用法,結(jié)合具體實(shí)例形式分析了ES6中變量與字符串的特性、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2017-04-04
Javascript節(jié)點(diǎn)關(guān)系實(shí)例分析
這篇文章主要介紹了Javascript節(jié)點(diǎn)關(guān)系,實(shí)例分析了javascript操作父子節(jié)點(diǎn)及兄弟節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
three.js中文文檔學(xué)習(xí)之創(chuàng)建場(chǎng)景
這篇文章主要給大家介紹了three.js中文文檔學(xué)習(xí)之創(chuàng)建場(chǎng)景的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-11-11
js中apply方法的使用詳細(xì)解析
本文是對(duì)js中apply方法的使用進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
js實(shí)現(xiàn)分享到隨頁(yè)面滾動(dòng)而滑動(dòng)效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)分享到隨頁(yè)面滾動(dòng)而滑動(dòng)效果的方法,實(shí)例分析了javascript操作頁(yè)面元素滾動(dòng)效果的方法,需要的朋友可以參考下
2015-04-04
js實(shí)現(xiàn)rem自動(dòng)匹配計(jì)算font-size的示例
本篇文章主要介紹了js實(shí)現(xiàn)rem自動(dòng)匹配計(jì)算font-size的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
uniapp小程序上傳圖片功能的實(shí)現(xiàn)
本篇文章我們研究一下，在移動(dòng)端開(kāi)發(fā)過(guò)程中經(jīng)常使用到的圖片上傳功能，在大多數(shù)小程序或者APP中都會(huì)遇到一些實(shí)名認(rèn)證或者頭像上傳的功能，對(duì)uniapp小程序?上傳圖片功能感興趣的朋友跟隨小編一起看看吧
2023-01-01
微信小程序中this.data與this.setData的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于微信小程序中this.data與this.setData區(qū)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧
2018-09-09
js兼容火狐顯示上傳圖片預(yù)覽效果的方法
這篇文章主要介紹了js兼容火狐顯示上傳圖片預(yù)覽效果的方法,涉及js調(diào)用FileReader實(shí)現(xiàn)圖片預(yù)覽功能的技巧,需要的朋友可以參考下
2015-05-05