用Javascript实现菜单折叠效果-阿里云开发者社区

开发者社区> 科技小先锋> 正文

用Javascript实现菜单折叠效果

简介:
+关注继续查看

在网上看了好多用Javascript实现菜单折叠的例子都特别的麻烦,于是自己写了一个虽然效果不如网上的强但是也可以实现了相应的功能:


  1. functiondisplay(num)   
  2. {  
  3. if(menu_left[num].style.display=="none")   
  4. {  
  5. for(a=0;a<menu_left.length;a++){   
  6. if(a==num){   
  7. menu_left[a].style.display="inline";   
  8. }  
  9. else{   
  10. menu_left[a].style.display="none";   
  11. }  
  12. }  
  13. }  
  14. else{   
  15. menu_left[num].style.display="none";   
  16. }  

 


  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">   
  2. <html>   
  3. <head>   
  4. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>   
  5. <linkrellinkrel="stylesheet"type="text/css"href="../../css.css">   
  6. <scriptlanguagescriptlanguage="javascript"src="hide.js"></script>   
  7.  
  8. </head>   
  9. <body>   
  10. <divclassdivclass="menu_left">   
  11. <ul>   
  12.  
  13. <li>   
  14. <ahrefahref="javascript:display(0)">号码信息维护管理</a>   
  15. <dividdivid="menu_left"style="display:none">   
  16. <ul>   
  17. <li>   
  18. <ahrefahref="information_select.html"target="right">查询号码信息</a>   
  19. </li>   
  20. <li>   
  21. <ahrefahref="information_batchupdata.html"target="right">状态批量修改页面</a>   
  22. </li>   
  23. <li>   
  24. <ahrefahref="loginformation_select.html"target="right">日志查询页面</a>   
  25. </li>   
  26. </ul>   
  27. </div>   
  28. </li>   
  29. <li>   
  30. <ahrefahref="javascript:display(1)">号码回收</a>   
  31. <dividdivid="menu_left"style="display:none">   
  32. <ul>   
  33. <li>   
  34. <ahrefahref="recovery/numbers_list_recovery.html"target="right">待回收号码清单</a>   
  35. </li>   
  36. <li>   
  37. <ahrefahref="recovery/numbers_statistics_recovery.html"target="right">待回收号码详情统计</a>   
  38. </li>   
  39. </ul>   
  40. </div>   
  41. </li>   
  42. <li>   
  43. <ahrefahref="restart/options.html"target="right">回收号码启用</a>   
  44.  
  45. </li>   
  46. </ul>   
  47. </div>   
  48. <divclassdivclass="right">   
  49. <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">   
  50. </iframe>   
  51. </div>   
  52. </body>   
  53. </html>  

这样就实现了菜单的折叠效果了,是不是觉得很简单啊。
还有一点要注意在引入脚本的时候<script></script>要这样写全,要不然会出不来页面


本文转自sucre03 51CTO博客,原文链接:http://blog.51cto.com/sucre/381826,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
日本用AI分配对象,价值观匹配效果超线下联谊!网友:十连抽保底新垣结衣
日本用AI分配对象,价值观匹配效果超线下联谊!网友:十连抽保底新垣结衣
12 0
7 个基于CSS/JavaScript的鼠标悬停效果教程
鼠标悬停效果是网页制作的常用特效之一,早期使用Flash可以制作非常炫的效果,现在我们同样也可以使用CSS和JavaScript来实现。   本文中,我们将推荐一些非常不错的鼠标悬停特效教程,希望对大家有所帮助! 1.  Hover and Click Trigger for Circular Elements with jQuery 这个教程介绍如何使用jQuery处理一个真正的圆形元素的悬停效果,使用:hover实现悬停。
592 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3975 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7630 0
JavaScript实现的网页放大镜效果
今天在观看视频学习的时候,学到了一个小技巧。就拿过来与大家进行分享一下啦。 实现的原理 分析需求:需要两张图,一大一小。然后根据鼠标的动作显示出不同的区域块的图像。 核心:鼠标事件的获取和处理。
1028 0
前端之美:9个很酷的基于 CSS3 和 JavaScript 实现的效果
  这篇文章向大家分享9个很酷的挑选自 DemoStudio 的 CSS3 和 JavaScript 实现的精美效果。DemoStudio 是 Mozilla Developer Network(MDN)用于展示一些非常优秀的 CSS3 和 JavaScript 效果的网站,Google 也有一个 Chrome Experiment,用于展示最新的 Web 技术应用。
883 0
10 个jQuery/JavaScript的圣诞主题效果
圣诞节快到了,赶快为你的网站打扮一番,换上节日的盛装吧!本文为你整理了10款使用jQuery和 JavaScript打造的圣诞主题效果,希望能给你带来些许惊喜。(PS:经过小编测试,下面的部分效果仅支持IE浏览器) 1.倒计时数字钟 设计一个JavaScript圣诞倒计时数字时钟,这个数字钟利用网站访问者的计算机上的时间来进行倒计时,因此这个脚本非常灵活,可以根据不同的时区设置对应的时间。
1044 0
Java 图片添加水印效果
package com.xiaowu.drawwater.demo; import java.awt.AlphaComposite; import java.awt.Graphics2D; import java.
997 0
4571
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载