JS實作下拉選單的顯示與隱藏
我們在上一篇文章中為大家介紹了關於JS實作下拉選單的程式碼，那麼下拉選單有顯示和隱藏，今天我們就給大家介紹下JS實作下拉選單的顯示與隱藏！
我們這篇來用JavaScript腳本實作下拉式選單的顯示與隱藏。使用JavaScript方法實作我們需要使用的知識有：
1)JS事件：onmouseover滑鼠經過事件和onmouseout滑鼠離開事件。
2)JS基礎語法：使用function關鍵字定義函數。
3)DOM程式設計：getElementsByTagName()方法。
那麼接下來就是我們製作的流程：
1)隱藏二級選單：設定CSS樣式,讓二級選單隱藏。
2)編寫顯示子選單showsub()函數：使用getElementsByTagName取得二級選單項目；透過style.display設定二級選單顯示。
3)編寫隱藏子選單hidesub()函數：使用getElementsByTagName取得二級選單項目；透過style.display設定二級選單隱藏。
4)新增滑鼠事件：為有二級選單的一級選單新增滑鼠事件,並呼叫showsub()/hidesub()函數，實作滑鼠經過一級選單，二級選單顯示和隱藏。
5)做瀏覽器相容性偵測，至少五個瀏覽器。 IE7,8,9，火狐，谷歌，2345瀏覽器等。
效果圖：
HTML程式碼：
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉菜单</title> <!--引入的外部CSS样式文件--> <link rel="stylesheet" type="text/css" href="style.css" /> <!--引入的外部JS脚本文件--> <script type="text/javascript" src="script.js"></script> </head> <body> <p id="nav" class="nav"> <ul> <li><a href="#">网站首页</a></li> <li onmouseover="showsub(this)" onmouseout="hidesub(this)"><a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Ajax</a></li> </ul> </li> <li onmouseover="showsub(this)" onmouseout="hidesub(this)"><a href="#">学习中心</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </p> </body> </html> </span>
外部CSS樣式表style.css檔案程式碼：
<span style="font-size:18px;">/*CSS全局设置*/
*{
margin:0;
padding:0;
}
.nav{
background-color:#EEEEEE;
height:40px;
width:450px;
margin:0 auto;
}
ul{
list-style:none;
}
ul li{
float:left;
line-height:40px;
text-align:center;
}
a{
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:40px;
}
a:hover{
background-color:#666666;
color:#FFFFFF;
}
ul li ul li{
float:none;
background-color:#EEEEEE;
}
ul li ul{
display:none;
}
/*为了兼容IE7设置的CSS样式，但是又必须写在a:hover前面*/
ul li ul li a:link,ul li ul li a:visited{
background-color:#EEEEEE;
}
ul li ul li a:hover{
background-color:#009933;
}
</span>外部JS腳本script.js檔案程式碼：
<span style="font-size:18px;">function showsub(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hidesub(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="none";
}</span>#總結：
本文透過實例為大家講解了JS實現下拉式選單的顯示與隱藏，相信大家對此也有一定的認識與了解，希望對你的工作有幫助！
相關推薦：
以上是JS實作下拉選單的顯示與隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Win11輸入法懸浮窗隱藏設置
Dec 30, 2023 pm 11:24 PM
有些小夥伴對於win11的輸入法懸浮窗功能非常不習慣，使用起來總是怪怪的，因此想要關閉這個懸浮窗功能，現在就給大家介紹一下win11系統下關閉懸浮窗的正確操作方法，一起跟著操作吧。 win11隱藏輸入法懸浮窗1、打開電腦的設定鍵，然後選擇“時間和語言“，進入之後再點擊”輸入“2、在“高級鍵盤設定”裡找到“切換輸入法”，然後把“桌面語言欄」前的勾點上，再進入「語言欄選項」3、開啟後，我們點選這裡的「隱藏「就可以把語言懸浮窗關掉了。
WPS表格下拉選單怎麼做
Mar 21, 2024 pm 01:31 PM
WPS表格下拉選單怎麼做：選中要設定下拉選單的儲存格後，依序點擊“資料”，“有效性”，再在彈出的對話框中進行對應設定後，以此來下拉我們的選單。 WPS作為一款功能強大的辦公室軟體，其本身擁有的能夠編輯文件、統計數據表格等的功能，為許多需要和文字、數據等打交道的人們提供了很多的便利。而要熟練地運用WPS軟體為我們提供很多方便，就需要我們能夠先掌握住WPS軟體的各種非常基本的操作，在這篇文章裡，小編就給大家分享一下怎麼在用WPS軟體做在出的WPS表格中進行下拉式選單的操作。開啟WPS表格後，先用滑鼠選
如何隱藏Windows 11工作列圖示？
Jan 06, 2024 am 08:38 AM
在win11系統中，如果我們覺得工作列中的圖示麻煩，可以選擇將它隱藏到任務欄角溢出介面中，不過下方開啟的應用工作列中的圖示是不可以隱藏的，下面就跟著小編來看一下具體的情況吧。 win11工作列圖標怎麼隱藏：一、居中圖標1、首先，如果我們要隱藏下方任務欄中的圖標，可以右鍵選中，點擊“從任務欄取消固定”2、但是如果我們打開了這個應用，並且正在使用它，那就是無法隱藏的。二、右下角圖標1、如果要隱藏右下角的應用程式圖標，先開啟系統設定。 2、然後點選左側邊欄的“個人化”，如圖所示。 3.接著點擊進入右側的工作列
不封鎖不刪除怎麼隱藏微信好友？不封鎖不刪除隱藏微信好友的方法
Mar 13, 2024 pm 07:19 PM
不黑不刪除怎麼隱藏微信好友？不少的用戶們想隱藏一些好友不知道要怎麼去操作，下面就讓本站來為用戶們來仔細的介紹一下不拉黑不刪除隱藏微信好友的方法吧。 不拉黑不刪除隱藏微信好友的方法 方法一： 1、先開啟微信軟體，在微信頁面找到通訊錄，點選」我的「。 2、然後我們進入到設定頁面。 3、找到」隱私「選項，點選進去。 4、接著點擊」不讓他看「。 5、進入到不讓她看頁面，點選」+「勾選需要隱藏的好友
抖音短影片怎麼隱藏作品 隱藏個人影片作品的方法
Mar 12, 2024 pm 12:49 PM
抖音短視頻app軟體內提供的短視頻作品非常多，隨心所欲想看就看，而且都是永久免費提供的，不同類型的視頻直播頻道都是開放的，所有的視頻內容都是原創的，帶給大家最滿意的觀看方式。輸入帳號線上登錄，各種精彩萬分的短視訊推送，都是根據大家日常看的，精準推薦，還能進入直播間與主播互動聊天，讓你的心情更加愉悅。個人上傳的作品也能隱藏起來，非常簡單一鍵設置，刷到哪裡看到哪，上下滑動無數網友的實時評論搶先看，還能分享日常的生活動態，現在小編在線詳細為抖音短視頻用戶推送隱藏個人影片作品的方法。首先打開抖音短
小米14如何隱藏靈動島？
Mar 18, 2024 pm 03:40 PM
除了令人驚嘆的硬體配置和出色的功能，小米14還隱藏著一個讓人著迷的地方—靈動島。在這裡，用戶可以盡情享受個人化客製化以及創意無限的手機體驗。不過不是所有人都喜歡這個功能的，那麼，小米14如何隱藏靈動島呢？讓我們一起了解一下。小米14如何隱藏靈動島？ 1.開啟小米14手機的設定應用程式。 2.捲動找到「特色功能」選項並點選進入。 3.在特色功能頁面中找到「隱藏靈動島」選項並開啟它。 4.確認開啟隱藏靈動島後，返回桌面即可看到靈動島已被隱藏。
抖音隱藏作品的詳細教學
Mar 25, 2024 pm 03:11 PM
1.先點選【+】進行拍攝。 2、然後點選右下角的勾確認完成拍攝。點選】下一步【，3、點選【誰可以看】。選擇【私密】即可，情境二：已拍作品，1、點選【我】，選擇【作品】。 2.點選右旁【三點】標識。 3.向左滑動，找到【權限設定】，4、點擊】設為私密】即可。
steam隱藏遊戲在哪
Feb 24, 2024 am 11:37 AM
steam中可以隱藏一些不想被看到的遊戲，那麼隱藏遊戲在哪呢？玩家們能夠在查看裡點擊隱藏的遊戲，就能夠在裡面發現自己隱藏的遊戲內容，這篇steam隱藏遊戲位置介紹就能夠告訴大家具體的方法，下面就是詳細的介紹，趕緊來看看吧！ 《steam使用教學》steam隱藏遊戲在哪答：在查看裡點擊隱藏的遊戲具體方法：1、先點擊軟體裡的查看，點擊隱藏的遊戲。 2.點擊之後，在左邊的選單裡就能夠看到隱藏的遊戲。怎麼隱藏遊戲：1、先點擊自己的遊戲庫。 2、選擇一個遊戲，右鍵選擇管理。 3、選擇隱藏此遊戲。
