本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
