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

2019-11-20 11:39:03

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/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程序设计有所帮助。

上一篇：jQuery实现多级下拉菜单jDropMenu的方法

下一篇：web前端开发JQuery常用实例代码片段(50个)