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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
Vue实现计算器计算效果
Aug 17 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异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
JavaScript中的其他对象
2008/01/16 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
万年牢教学反思
2014/02/15 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
晚会主持词开场白
2014/03/17 职场文书
大学生评语大全
2014/04/18 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
辞职信标准格式
2015/02/27 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书