js实现简单折叠、展开菜单的方法


Posted in Javascript onAugust 28, 2015

本文实例讲述了js实现简单折叠、展开菜单的方法。分享给大家供大家参考。具体如下:

这里介绍的是意乱会折叠、展开的菜单导航栏,很老时候写的,CSS没有做美化,如果想用的朋友就自己美化吧。

运行效果截图如下:

js实现简单折叠、展开菜单的方法

在线演示地址如下:

具体代码如下:

<html>
<script> 
function show(c_Str)
{if(document.all(c_Str).style.display=='none')
{document.all(c_Str).style.display='block';}
else{document.all(c_Str).style.display='none';}}
function high(){
if (event.srcElement.className=="k"){
event.srcElement.style.background="336699"
event.srcElement.style.color="white"
}
}
function low(){
if (event.srcElement.className=="k"){
event.srcElement.style.background="99CCFF"
event.srcElement.style.color=""
}
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>导航栏</title>
<style>
td { cursor: hand; font-family: Tahoma; background-color: #336699; color: #99CCFF; font-size: 10pt }
li{ color: #FF0000; font-family: Tahoma; background-color: #99CCFF; font-size: 9pt}
.up{ background-color: #3A6EA5; border-left: 1 solid #A6C1DF;border-right: 1 solid #002200; border-top: 1 solid #A6C1DF; border-bottom: 1 solid #002200 }
</style>
</head>
<body topmargin="0" leftmargin="5">
<div align="left">
 <table border="0" width="48" cellspacing="0" cellpadding="0">
 <tr>
  <td><div class=up onclick=show("a0")>+01-10</div><div onmouseover=high() onmouseout=low() id=a0 style="display:none">
<li class=k>01</li>
<li class=k>02</li>
<li class=k>03</li>
<li class=k>04</li>
<li class=k>04</li>
<li class=k>05</li>
<li class=k>06</li>
<li class=k>07</li>
<li class=k>08</li>
<li class=k>09</li>
<li class=k>10</li>
  </div></td>
 </tr>
 <tr>
  <td><div class=up onclick=show("a1")>+11-20</div><div onmouseover=high() onmouseout=low() id=a1 style="display:none">
<li class=k>11</li>
<li class=k>12</li>
<li class=k>13</li>
<li class=k>14</li>
<li class=k>15</li>
<li class=k>16</li>
<li class=k>17</li>
<li class=k>18</li>
<li class=k>19</li>
<li class=k>20</li>
  </div></td>
 </tr>
 <tr>
  <td><div class=up onclick=show("a2")>+21-30</div><div onmouseover=high() onmouseout=low() id=a2 style="display:none">
<li class=k>21</li>
<li class=k>22</li>
<li class=k>23</li>
<li class=k>24</li>
<li class=k>25</li>
<li class=k>26</li>
<li class=k>27</li>
<li class=k>28</li>
<li class=k>29</li>
<li class=k>30</li>
  </div></td>
 </tr>
   <tr>
  <td><div class=up onclick=show("a3")>+31-40</div><div onmouseover=high() onmouseout=low() id=a3 style="display:none">
<li class=k>31</li>
<li class=k>32</li>
<li class=k>33</li>
<li class=k>34</li>
<li class=k>35</li>
<li class=k>36</li>
<li class=k>37</li>
<li class=k>38</li>
<li class=k>39</li>
<li class=k>40</li>
  </div></td>
 </tr>
  <tr>
  <td><div class=up onclick=show("a4")>+41-50</div><div onmouseover=high() onmouseout=low() id=a4 style="display:none">
<li class=k>41</li>
<li class=k>42</li>
<li class=k>43</li>
<li class=k>44</li>
<li class=k>45</li>
<li class=k>46</li>
<li class=k>47</li>
<li class=k>48</li>
<li class=k>49</li>
<li class=k>50</li>
  </div></td>
 </tr>
   <tr>
  <td><div class=up onclick=show("a5")>+51-60</div><div onmouseover=high() onmouseout=low() id=a5 style="display:none">
<li class=k>51</li>
<li class=k>52</li>
<li class=k>53</li>
<li class=k>54</li>
<li class=k>55</li>
<li class=k>56</li>
<li class=k>57</li>
<li class=k>58</li>
<li class=k>59</li>
<li class=k>60</li>
  </div></td>
 </tr>
  <tr>
  <td><div class=up onclick=show("a7")>+61-70</div><div onmouseover=high() onmouseout=low() id=a7 style="display:none">
<li class=k>61</li>
<li class=k>62</li>
<li class=k>63</li>
<li class=k>64</li>
<li class=k>65</li>
<li class=k>66</li>
<li class=k>67</li>
<li class=k>68</li>
<li class=k>69</li>
<li class=k>70</li>
  </div></td>
 </tr>
  <tr>
  <td><div class=up onclick=show("a8")>+71-80</div><div onmouseover=high() onmouseout=low() id=a8 style="display:none">
<li class=k>71</li>
<li class=k>72</li>
<li class=k>73</li>
<li class=k>74</li>
<li class=k>75</li>
<li class=k>76</li>
<li class=k>77</li>
<li class=k>78</li>
<li class=k>79</li>
<li class=k>80</li>
  </div></td>
 </tr>
 </table>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js中if语句的几种优化代码写法
Mar 12 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
微信小程序云开发详细教程
May 16 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 #Javascript
js实现超简单的展开、折叠目录代码
Aug 28 #Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 #Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 #Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 #Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 #Javascript
Angular Js文件上传之form-data
Aug 28 #Javascript
You might like
php循环输出数据库内容的代码
2008/05/24 PHP
PHP文件操作方法汇总
2015/07/01 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
javascript动态加载二
2012/08/22 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python回调函数用法实例详解
2015/07/02 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
python中使用print输出中文的方法
2018/07/16 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
python logging模块的使用详解
2020/10/23 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
售后服务科岗位职责范文
2013/11/13 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
MySQL连接控制插件介绍
2021/09/25 MySQL