可折叠菜单

简单的css布局

<style type="text/css">
div{
 margin-bottom:10px;
 margin-left:150px;
}
.menu{
 display:none;
 list-style:none;
 margin:0px;
 padding:0px;
}
</style>

 

body 部分

<div>
 <a href="menu1.html" class="menuLink">menu1</a>
 <ul class="menu" id="menu1">
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu1</a></li>
  
 </ul>
</div>
<div>
 <a href="menu2.html" class="menuLink">menu2</a>
 <ul class="menu" id="menu2">
  <li><a href="#">menu2</a></li>
  <li><a href="#">menu2</a></li>
  <li><a href="#">menu2</a></li>
  <li><a href="#">menu2</a></li>
  
 </ul>
</div>
<div>
 <a href="menu3.html" class="menuLink">menu3</a>
 <ul class="menu" id="menu3">
  <li><a href="#">menu3</a></li>
  <li><a href="#">menu3</a></li>
  <li><a href="#">menu3</a></li>
  <li><a href="#">menu3</a></li>
  
 </ul>
</div>
<div>
 <a href="menu4.html" class="menuLink">menu4</a>
 <ul class="menu" id="menu4">
  <li><a href="#">menu4</a></li>
  <li><a href="#">menu4</a></li>
  <li><a href="#">menu4</a></li>
  <li><a href="#">menu4</a></li>
  
 </ul>
</div>

 

javascript 部分

<script type="text/javascript">
window.onload=initAll;
function initAll(){
 var allLinks=document.getElementsByTagName("a");
 for(var i=0;i<allLinks.length;i++){
  if(allLinks[i].className.indexOf("menuLink")>-1){
   allLinks[i].onclick=toggleMenu;
  }
 }
}
function toggleMenu(){
 var startMenu=this.href.lastIndexOf("/")+1;
 var stopMenu=this.href.lastIndexOf(".");
 
 var thisMenuName=this.href.substring(startMenu,stopMenu);
 var thisMenu=document.getElementById(thisMenuName).style;
 thisMenu.display=(thisMenu.display=="block") ? "none" : "block";
 return false;
}
</javascript>