这篇文章主要介绍了js实现简单折叠、展开菜单的方法,涉及javascript动态操作页面元素变换的相关技巧，具有一定参考借鉴价值，需要的朋友可以参考下，具体如下：
这里介绍的是意乱会折叠、展开的菜单导航栏，很老时候写的，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"><p align="left"> <table border="0" width="48" cellspacing="0" cellpadding="0"> <tr> <td><p class=up onclick=show("a0")>+01-10</p><p 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> </p></td> </tr> <tr> <td><p class=up onclick=show("a1")>+11-20</p><p 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> </p></td> </tr> <tr> <td><p class=up onclick=show("a2")>+21-30</p><p 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> </p></td> </tr> <tr> <td><p class=up onclick=show("a3")>+31-40</p><p 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> </p></td> </tr> <tr> <td><p class=up onclick=show("a4")>+41-50</p><p 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> </p></td> </tr> <tr> <td><p class=up onclick=show("a5")>+51-60</p><p 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> </p></td> </tr> <tr> <td><p class=up onclick=show("a7")>+61-70</p><p 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> </p></td> </tr> <tr> <td><p class=up onclick=show("a8")>+71-80</p><p 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> </p></td> </tr> </table></p></body></html>
以上就是本章的全部内容，更多相关教程请访问javascript视频教程！