js實作簡單折疊、展開選單的方法-js教程-PHP中文網

首頁

web前端

js教程

js實作簡單折疊、展開選單的方法

PHPz

May 16, 2016 pm 03:41 PM

js 展開折疊選單

這篇文章主要介紹了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==&#39;none&#39;)
{document.all(c_Str).style.display=&#39;block&#39;;}
else{document.all(c_Str).style.display=&#39;none&#39;;}}
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視訊教學！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7722

Java教學

1642

CakePHP 教程

1396

Laravel 教程

1289

PHP教程

1233

Related knowledge

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

Google Pixel 9 Pro Fold 手機殼曝光：外屏 6.4 英寸、內屏 8.02 英寸 Jun 25, 2024 pm 02:35 PM

6月25日消息，消息來源ytechb昨（6月24日）發布博文，分享了谷歌Pixel9ProFold手機殼渲染圖，再次展示了這款折疊螢幕背面的設計。先前消息，Google將於今年10月發表Pixel9系列手機，除了Pixel9系列三款手機之外，PixelFold也納入Pixel9系列中，正式上架後名稱為Pixel9ProFold。這次曝光的手機殼來自配件廠商Torro，該公司的英國和美國線上商店已經列出了該產品手機殼，並揭露了這款手機的設計和顯示器尺寸。頁面中展示了大量Pixel9ProFold手機殼渲染

三星萬元折疊機皇W25曝光：500萬像素屏下前攝機身更薄了 Aug 23, 2024 pm 12:43 PM

8月23日消息，三星即將推出新款折疊手機W25，預計9月底亮相，將在屏下前攝、機身厚度上作出相應的提升。據報道，三星W25代號為Q6A，將配備500萬像素螢幕下鏡頭，相較於GalaxyZFold系列的400萬像素相機有所提升。此外，W25的外螢幕前置相機和超廣角相機預計分別為1000萬和1200萬像素。在設計上，W25折疊狀態的厚度約為10毫米，比標準版GalaxyZFold6薄約2毫米。螢幕方面，W25的外屏為6.5英寸，內屏為8英寸，而GalaxyZFold6的外屏為6.3英寸，內屏為

如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形，透過繪製股票的開盤價、收盤價、最高價和最低價等數據，幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖，並附上具體的程式碼範例。一、準備工作在開始之前，我們需要準備以下環境：1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

三星Galaxy Z Flip 6機模首曝：邊框更窄摺痕依然存在 Jun 22, 2024 am 03:28 AM

6月21日消息，近日，外媒在網路上放出了三星GalaxyZFlip6的機模照片。根據圖片可以了解到，三星GalaxyZFlip6的邊框將進一步收窄，這意味著手機在折疊狀態下的寬度可能會減小，也將提供更舒適的握持感和便攜性。而且，GalaxyZFlip6的機模相較於上一代ZFlip5，整機顯得更加方正一些，背面的相機模組也要更加突出，預計採用了新的相機感光元件。不過，從正面看上去，手機的摺痕依然比較明顯，但考慮到洩漏的是模型機，與真機可能會有些許差距，因此僅供參考。在性能配置方面，Galaxy

折疊螢幕手機最大短板：沒有核心應用場景 Mar 16, 2024 am 09:04 AM

我們今天探討的並非某一款產品到底怎麼樣，而是回歸到「折疊螢幕」話題本身上來，探究一下折疊螢幕手機的「合理性」。首先還是看一看折疊螢幕手機的市場表現，根據IDC最新數據報告顯示，2023年全年中國折疊螢幕手機市場出貨量約700.7萬台，較去年同期成長114.5%。其中，2023年第四季中國折疊螢幕手機市場出貨量約277.1萬台，較去年同期成長149.6%，數據看起來確實還不錯，成長也很強勢。不過與2023年中國市場智慧型手機2.7億左右出貨量相比，這個數據就著實不太夠看了。總的來說

IDC 預計 2024 全球智慧型手機出貨量 12 億部：折疊螢幕 2,500 萬部，較去年同期成長 37% Feb 24, 2024 pm 02:20 PM

2月24日消息，IDC近日發布市場研究報告，預估2024年全球智慧型手機出貨量將達到12億部，年增2.8%，隨後到2028年將維持較低的個位數成長。 IDC認為2024年整體出貨量仍低於疫情前的水平，但全球智慧型手機市場已走出低谷，開始呈現復甦上揚趨勢。 IDC認為推動整體市場復甦的兩個關鍵因素，其一是設備更新周期，其二新興市場需求的成長。另外還有兩個主要驅動力，IDC預估折疊屏手機2024年出貨量將達到2500萬部，同比增長37%；另外就是人工智能（AI）已迅速成為智能手機討論的一部分，引發了

See all articles

js實作簡單折疊、展開選單的方法

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題