在网上看了好多用Javascript实现菜单折叠的例子都特别的麻烦，于是自己写了一个虽然效果不如网上的强但是也可以实现了相应的功能：
- functiondisplay(num)
- {
- if(menu_left[num].style.display=="none")
- {
- for(a=0;a<menu_left.length;a++){
- if(a==num){
- menu_left[a].style.display="inline";
- }
- else{
- menu_left[a].style.display="none";
- }
- }
- }
- else{
- menu_left[num].style.display="none";
- }
- }
- <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
- <linkrellinkrel="stylesheet"type="text/css"href="../../css.css">
- <scriptlanguagescriptlanguage="javascript"src="hide.js"></script>
- </head>
- <body>
- <divclassdivclass="menu_left">
- <ul>
- <li>
- <ahrefahref="javascript:display(0)">号码信息维护管理</a>
- <dividdivid="menu_left"style="display:none">
- <ul>
- <li>
- <ahrefahref="information_select.html"target="right">查询号码信息</a>
- </li>
- <li>
- <ahrefahref="information_batchupdata.html"target="right">状态批量修改页面</a>
- </li>
- <li>
- <ahrefahref="loginformation_select.html"target="right">日志查询页面</a>
- </li>
- </ul>
- </div>
- </li>
- <li>
- <ahrefahref="javascript:display(1)">号码回收</a>
- <dividdivid="menu_left"style="display:none">
- <ul>
- <li>
- <ahrefahref="recovery/numbers_list_recovery.html"target="right">待回收号码清单</a>
- </li>
- <li>
- <ahrefahref="recovery/numbers_statistics_recovery.html"target="right">待回收号码详情统计</a>
- </li>
- </ul>
- </div>
- </li>
- <li>
- <ahrefahref="restart/options.html"target="right">回收号码启用</a>
- </li>
- </ul>
- </div>
- <divclassdivclass="right">
- <iframeclassiframeclass="rightIframe"src="information_select.html"name="right"frameborder="0"scrolling="no"width="100%"onload="this.height=0;varfdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>7?fdh:7)"allowtransparency="false">
- </iframe>
- </div>
- </body>
- </html>
这样就实现了菜单的折叠效果了，是不是觉得很简单啊。
还有一点要注意在引入脚本的时候<script></script>要这样写全，要不然会出不来页面。
本文转自sucre03 51CTO博客，原文链接：http://blog.51cto.com/sucre/381826，如需转载请自行联系原作者
