<!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>

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

您可能感興趣的文章:

相關(guān)文章

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