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

更新时间：2015年08月28日 15:05:41 作者：企鹅

这篇文章主要介绍了js实现简单折叠、展开菜单的方法,涉及javascript动态操作页面元素变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-simple-hidden-show-menu-codes/

具体代码如下：

<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仿PHP $_GET获取URL中的参数
这篇文章主要介绍了Javascript仿PHP $_GET获取URL中的参数代码实例,需要的朋友可以参考下
2014-05-05
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
这篇文章主要介绍了JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法,其实就是利用JS检测div的名称和样式名称实现,需要的朋友可以参考下
2014-11-11
微信小程序自定义tabbar栏实现过程讲解
tabBar相对而言用的还是比较多的,但是用起来并没有难,下面这篇文章主要给大家介绍了关于微信小程序全局配置之tabBar的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
jquery删除ID为sNews的tr元素的内容
这篇文章主要介绍了删除ID为sNews的索引为JQID的tr元素里的内容,需要的朋友可以参考下
2014-04-04
Bootstrap CSS使用方法
这篇文章主要为大家详细介绍了Bootstrap中CSS的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
微信小程序url传参写变量的方法
这篇文章主要介绍了微信小程序url传参写变量的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08
全面了解JavaScript对象进阶
下面小编就为大家带来一篇全面了解JavaScript对象进阶。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
HTML+CSS+JavaScript实现下拉菜单效果
这篇文章主要为大家详细介绍了HTML+CSS+JavaScript实现下拉菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JavaScript 编写枚举的最有效方法分享
这篇文章主要介绍了JavaScript 编写枚举的最有效方法分享，JavaScript语言本身不支持枚举。如果我们想模拟枚举，我们可以使用一个对象。更多相关内容感兴趣的小伙伴可以参考一下
2022-06-06
JavaScript函数及其prototype详解
这篇文章主要介绍了JavaScript函数及其prototype详解的相关资料,需要的朋友可以参考下
2023-03-03

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具