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添加重载函数的辅助方法
Jul 04 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
vant实现购物车功能
Jun 29 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
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
python中Switch/Case实现的示例代码
2017/11/09 Python
django基础学习之send_mail功能
2019/08/07 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
python实现快递价格查询系统
2020/03/03 Python
什么是Python中的匿名函数
2020/06/02 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
中学生获奖感言
2014/02/04 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
装修设计师求职信
2014/02/26 职场文书
园林技术专业求职信
2014/07/28 职场文书
班子四风对照检查材料
2014/08/21 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书