溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery實(shí)現(xiàn)二級(jí)導(dǎo)航下拉菜單效果實(shí)例

發(fā)布時(shí)間：2020-10-03 12:26:56 來源：腳本之家 閱讀：139 作者：Alvin哥哥 欄目：web開發(fā)

大家都知道jQuery是一個(gè)框架，它對(duì)JS進(jìn)行了封裝，使其更方便使用。前面兩篇博文分別是用CSS樣式和JS實(shí)現(xiàn)的，那么這篇就用jQuery來實(shí)現(xiàn)二級(jí)下拉式菜單。

使用JQuery實(shí)現(xiàn)需要用到的知識(shí)有：

  1. 1)使用$(function(){...})獲取到想要作用的HTML元素。
  2. 2)通過使用children()方法尋找子元素。
  3. 3)通過使用show()方法來顯示HTML元素。
  4. 4)通過使用hide()方法來隱藏HTML元素。
  5. 5)jQuery庫(kù)引用方法:

第一種方法：將jQuery庫(kù)下載到電腦上，然后引用，我下載的是jquery-1.7.1.min.js這個(gè)版本。

例如： 

<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>

第二種方法：直接引用在線服務(wù)器上的jQuery庫(kù)文件，比如谷歌服務(wù)器jQuery庫(kù)，百度服務(wù)器jQuery庫(kù)等。

例如：引用百度服務(wù)器上的jQuery庫(kù)文件

<script type="text/javascript" src="jquery/1.9.0/jquery.js"></script>

接下來看看制作的流程：

  1. 1、調(diào)用jQuery庫(kù)：編寫代碼，引用jquery庫(kù)。由于谷歌已退出大陸，建議使用百度服務(wù)器的jQuery庫(kù)。
  2. 注意: 百度服務(wù)器的jQuery庫(kù)地址:http://libs.baidu.com/jquery/1.9.0/jquery.js
  3. 2 、編寫顯示子菜單函數(shù)，使用$,并通過class名獲取一級(jí)菜單li，過children()找到li的孩子元素ul，使用show()方法,顯示二級(jí)菜單。
  4. 3、編寫隱藏子菜單函數(shù)，使用$,并通過class名獲取一級(jí)菜單li，過children()找到li的孩子元素ul，使用hide()方法, 隱藏二級(jí)菜單。
  5. 4、做瀏覽器兼容性測(cè)試，至少五個(gè)瀏覽器。IE7,8,9，火狐，谷歌，2345瀏覽器等。

先來看看效果圖：

jquery實(shí)現(xiàn)二級(jí)導(dǎo)航下拉菜單效果實(shí)例

最后我們來看看代碼的情況，和前面的區(qū)別不大：

HTML代碼：

<!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>

<link
rel="stylesheet"
type="text/css"
href="style.css" rel="external nofollow" 
/>

<!--引用百度服務(wù)器的jQuery庫(kù)-->

<script
src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script
type="text/javascript"
src="script.js"></script>

</head>

  

<body>

<div
id="nav"
class="nav">

  <ul>

    <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >網(wǎng)站首頁(yè)</a></li>

   <li
class="navmenu"><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >課程大廳</a>

    <ul>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >JavaScript</a></li>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >jQuery</a></li>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Ajax</a></li>

    </ul>

   </li>

   <li
class="navmenu"><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >學(xué)習(xí)中心</a>

    <ul>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >視頻學(xué)習(xí)</a></li>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >案例學(xué)習(xí)</a></li>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >交流平臺(tái)</a></li>

    </ul>

   </li>

   <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >經(jīng)典案例</a></li>

   <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >關(guān)于我們</a></li>

  </ul>

</div>

</body>

</html>

CSS樣式表外部style.css文件代碼：

/*CSS全局設(shè)置*/

*{

 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;

}

JS腳本外部script,js文件代碼：

$(function(){

  $(".navmenu").mouseover(function(){

   $(this).children("ul").show(); 

  })

   

  $(".navmenu").mouseout(function(){

   $(this).children("ul").hide();

  })

})

以上所述是小編給大家介紹的jquery二級(jí)導(dǎo)航下拉菜單詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手