js折叠菜单

<!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=gb2312" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <title> New Document </title>
 <script language="javascript">
 //菜单隐藏与显示
 function SwitchMenu(obj){
  if(document.getElementById){
  var el = document.getElementById("Menu_"+obj);
  var ar = document.getElementById("Menu").getElementsByTagName("ul"); 
   if(el.style.display != "block"){ 
    for (var i=0; i<ar.length; i++){
     if (ar[i].className=="submenu")
     ar[i].style.display = "none";
     document.getElementById("Menu"+(i+1)).className="Menutbg_1 cursor"
    }
    el.style.display = "block";
    document.getElementById("Menu"+obj).className="Menutbg_2 cursor"
   }else{
    el.style.display = "none";
    document.getElementById("Menu"+obj).className="Menutbg_1 cursor"
   }
  }
 }
 </script>
 <style type="text/css">
 <!--
 body{font-family: "宋体";font-size:12px;}
 #Menu{width:140px;border:#B1DCF4 1px solid;border-top:none;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;}
 .cursor{cursor:pointer;}
 .submenu{display: none;}
 .Menutbg_1{background:#090 ;display: block;width:140px;height:30px;line-height:30px;border:#B1DCF4 1px solid;text-align:center;font-weight: bold;letter-spacing:3px;}
 .Menutbg_2{background:#FF0 ;display: block;width:140px;height:30px;line-height:30px;border:#B1DCF4 1px solid;text-align:center;font-weight: bold;color:#0F6599;letter-spacing:3px;}
 -->
 </style>
</head>
<body>
 <div id="Menu">
  <div id="Menu1" class="Menutbg_1 cursor" οnclick="SwitchMenu('1')">一级菜单A</div>
  <ul id="Menu_1" class="submenu">
   <li><a href="a1.htm">A1</a></li>
   <li><a href="a2.htm">A2</a></li>
   <li><a href="a3.htm">A3</a></li>
   <li><a href="a4.htm">A4</a></li>
  </ul>
  <div id="Menu2" class="Menutbg_1 cursor" οnclick="SwitchMenu('2')">一级菜单B</div>
  <ul id="Menu_2" class="submenu">
   <li><a href="b1.htm">B1</a></li>
   <li><a href="b2.htm">B2</a></li>
  </ul>
  <div id="Menu3" class="Menutbg_1 cursor" οnclick="SwitchMenu('3')">一级菜单C</div>
  <ul id="Menu_3" class="submenu">
   <li><a href="c1.htm">C1</a></li>
   <li><a href="c2.htm">C2</A></li>
  </ul>
 </div>
</body>

</html>


原文地址:http://blog.163.com/liushangfeng_ryl@126/blog/static/15783270200852531212669/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<head> <SCRIPT src="images/tree_naviIndex.js" type=text/javascript></SCRIPT> <style> #mainLeft { FONT-SIZE: 12px; FLOAT: left; WIDTH: 218px; HEIGHT: auto; BACKGROUND-COLOR: #f2f6fb;padding:10px 0px 10px 5px;margin:0px; } #mainLeft li A { width:150px; COLOR: #263d4f; TEXT-DECORATION: none; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } #mainLeft li A:hover { COLOR: #ff6500; TEXT-DECORATION: underline } #mainLeft UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } #mainLeft UL LI { MARGIN: 0px; LIST-STYLE-TYPE: none } #mainLeft ul li:not(p) { clear: both; } #mainLeft ul li:not(p) a { max-width:130px; float: left; } #mainLeft ul li:not(p):after { content: "..."; float: left; width: 10px; padding-left:2px; color: #000; } </style> </head> <body> <DIV id=mainLeft> <DIV id=room0><IMG src="images/root.gif" align=absMiddle> <A href="http://bbs.big-bit.com/">技术论坛首页</A> </DIV> <DIV id=room5><IMG id=minus_5 onclick=showRoom(5); src="images/_minus1.gif" align=absMiddle><IMG id=folderOpen_5 src="images/folderopen.gif" align=absMiddle> <A onclick=showRoom(5); href="#">磁性元器件研发及应用技术区</A></DIV> <DIV id=file5 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=118">电源供应器技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=104">电子变压器技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=115">电感与线圈技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=116">磁性材料、配件、辅助材料技术</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=141">生产、品质、制程与企业管理</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=120">紧急求助区</A> </LI> </UL> </DIV> <DIV id=room10><IMG id=minus_10 onclick=showRoom(10); src="images/_minus1.gif" align=absMiddle><IMG id=folderOpen_10 src="images/folderopen.gif" align=absMiddle> <A onclick=showRoom(10); href="#">资料上传下载区</A></DIV> <DIV id=file10 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=106">电源供应器资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=117">电子变压器资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=119">电感与线圈资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=134">磁性材料与配件、辅助材料资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=135">安规、标准资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=142">生产、品质、制程与企业管理资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=144">磁性元器件应用领域资料</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=143">电子工程师必备知识</A> </LI> </UL> </DIV> <DIV id=room6><IMG src="images/_minus1.gif" name="minus_6" align=absMiddle id=minus_6 onclick=showRoom(6);><IMG src="images/folderopen.gif" name="folderOpen_6" align=absMiddle id=folderOpen_6> <A onclick=showRoom(6); href="#">原创精华帖展示区</A></DIV> <DIV id=file6 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=137">电源供应器精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=138">电子变压器精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=139">电感与线圈精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=140" target=_blank>磁性材料精华<SPAN style="COLOR: #ff6500">[新]</SPAN></A> </LI> </UL> </DIV> <DIV id=room3><IMG id=plus_3 onclick=showRoom(3); src="images/_plus1.gif" align=absMiddle><IMG id=folder_3 src="images/folder.gif" align=absMiddle> <A onclick=showRoom(3); href="#">休闲灌水</A></DIV> <DIV id=file3 style="DISPLAY:none"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=131">企业评说</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=128">市场讨论</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=110">职场心情</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=109">自由天空</A> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/index.asp?boardid=133">供求合作</A> </LI> </UL> </DIV> <DIV id=room7><IMG src="images/_minus1.gif" name="minus_7" align=absMiddle id=minus_7 onclick=showRoom(7);><IMG src="images/folderopen.gif" name="folderOpen_7" width="16" height="16" align=absMiddle id=folderOpen_7> <A onclick=showRoom(7); href="#">站务管理</A></DIV> <DIV id=file7 style="DISPLAY: block"> <UL> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=43359">重要通知</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=38376">积分奖品兑换帖(修改)</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=32595">收集建议</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=38989">大比特论坛诚征版主!</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=44187">论坛版面调整和相关功能完善公告</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=49020">有关上传附件容量公告</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=37757">大比特论坛版主的权利与职责</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line1.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=43627">关于恶意刷分取消兑奖的公示</A> </LI> <LI><IMG src="images/_line4.gif" align=absMiddle><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=37758">版主奖罚制度</A> </LI> </UL> </DIV> <DIV id=file8> <UL> <LI><IMG src="images/_line2.gif" align=absMiddle><IMG src="images/file.gif" align=absMiddle> <A href="http://bbs.big-bit.com/dispbbs.asp?boardid=108&ID=32595">建议信箱区</A> </LI> </UL> </DIV> </DIV> </body> 实现二级树状菜单,兼容性好。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值