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 相关文章推荐
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 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
咖啡语言
2021/03/03 咖啡文化
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
python 实现将Numpy数组保存为图像
2020/01/09 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
幼教毕业生自我鉴定
2014/01/12 职场文书
服务承诺书格式
2014/05/21 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
消防宣传语大全
2015/07/13 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python