jquery實(shí)現(xiàn)動(dòng)態(tài)菜單的實(shí)例代碼

更新時(shí)間：2013年11月28日 09:05:20 作者：

這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)菜單的實(shí)例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

jquery實(shí)現(xiàn)動(dòng)態(tài)菜單的方式跟jquery彈出窗口的方式差不多，都是采用JavaScript操作css的方式。

其具體步驟可以分為以下幾步：

•創(chuàng)建一個(gè)含有要表達(dá)的菜單的html頁(yè)面

<html>
  <head>
    <title>jquery示例2：jquery菜單</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="css/menu.css" mce_href="css/menu.css">
    <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
    <mce:script type="text/javascript" src="jslib/jquerymenu.js" mce_src="jslib/jquerymenu.js"></mce:script>
  </head>
  <body>
    <ul>
        <a href="#" mce_href="#">我是菜單1</a>
        <li>我是子菜單1</li>
        <li>我是子菜單2</li>
    </ul>
    <ul>
        <a href="#" mce_href="#">我是菜單2</a>
        <li>我是子菜單3</li>
        <li>我是子菜單4</li>
    </ul>
    <div id="content"></div>
  </body>
</html>

•創(chuàng)建一個(gè)css文件來(lái)控制菜單的顯示

復(fù)制代碼代碼如下:

/*讓所有的li都不顯示小圓點(diǎn)，可以使用css標(biāo)簽選擇器*/
li{
    /*使list前的小圓點(diǎn)消失*/
    list-style: none;
    /*縮進(jìn)效果*/
    margin-left: 18px;
    /*隱藏菜單*/
    display: none;
}
a{
    /*文字的顯示方式*/
    text-decoration: none;
}

•創(chuàng)建一個(gè)JavaScript文件來(lái)控制菜單的顯示

復(fù)制代碼代碼如下:

/* 
 * 點(diǎn)擊主菜單，子菜單顯示；再次點(diǎn)擊主菜單，子菜單隱藏
 * 需要編寫(xiě)代碼，使得主菜單在裝載時(shí)添加onclick事件，使得點(diǎn)擊主菜單可以顯示子菜單
 * 注冊(cè)頁(yè)面裝載時(shí)執(zhí)行的方法
 */
$(document).ready(function(){
   //var uls = $("ul");
   //找到ul下的a節(jié)點(diǎn)
   var as = $("ul > a");
   as.click(function(){
       //首先找到當(dāng)前ul中的li，然后讓li顯示出來(lái)
       //獲取當(dāng)前被點(diǎn)擊的ul節(jié)點(diǎn)
       var aNode = $(this);
       //找到被點(diǎn)擊ul節(jié)點(diǎn)下的所有l(wèi)i節(jié)點(diǎn)
       var lis = aNode.nextAll("li");
       //顯示或隱藏ul的li子節(jié)點(diǎn)們
       lis.toggle("slow");
   });
});

您可能感興趣的文章:

相關(guān)文章

使用jQueryMobile實(shí)現(xiàn)滑動(dòng)翻頁(yè)效果的方法
這篇文章主要介紹了使用jQueryMobile實(shí)現(xiàn)滑動(dòng)翻頁(yè)效果的方法,較為詳細(xì)的分析了jQueryMobile實(shí)現(xiàn)滑動(dòng)翻頁(yè)效果的原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
基于jQuery的固定表格頭部的代碼(IE6,7,8測(cè)試通過(guò))
目前只能算個(gè)不完整的腳本，不過(guò)一般的僅僅需要表頭凍結(jié)就可以使用了
2010-05-05
jQuery實(shí)現(xiàn)選項(xiàng)聯(lián)動(dòng)輪播效果【附實(shí)例】
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)選項(xiàng)聯(lián)動(dòng)輪播效果【附實(shí)例】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考
2016-04-04
基于jquery的設(shè)置頁(yè)面文本框只能輸入數(shù)字的實(shí)現(xiàn)代碼
之前寫(xiě)過(guò)的方法有缺陷，可以輸入空格?，F(xiàn)在將空格也屏蔽了。就是在之前的代碼里加入了過(guò)濾空格的功能。
2011-04-04
收集的10個(gè)免費(fèi)的jQuery相冊(cè)
或許在網(wǎng)絡(luò)上你已經(jīng)見(jiàn)過(guò)數(shù)百種通過(guò)jQuery實(shí)現(xiàn)的相冊(cè)，但是我們發(fā)現(xiàn)的這些相冊(cè)，他們有額外的東西，優(yōu)雅和獨(dú)特的創(chuàng)意！每個(gè)相冊(cè)都是可在線(xiàn)預(yù)覽和免費(fèi)下載的。你可以為你的Web項(xiàng)目添加色彩。
2011-02-02
基于jquery用于查詢(xún)操作的實(shí)現(xiàn)代碼
通過(guò)javascript得到用戶(hù)操作改變url參數(shù)從而實(shí)現(xiàn)某些功能，如查詢(xún)(具體的查詢(xún)由服務(wù)器端代碼得到url中的參數(shù)組成查詢(xún)語(yǔ)句實(shí)現(xiàn))。
2010-05-05
關(guān)于jQuery參考實(shí)例 1.0 jQuery的哲學(xué)
本文為大家介紹關(guān)于jQuery參考實(shí)例 1.0 jQuery的哲學(xué)，有需要的朋友可以參考一下。
2013-04-04
jQuery動(dòng)態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法
下面小編就為大家分享一篇jQuery動(dòng)態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
jquery實(shí)現(xiàn)圖片漸變切換兼容ie6/Chrome/Firefox
jquery代碼實(shí)現(xiàn)圖片漸變切換同時(shí)兼容ie6、Chrome、Firefox，想學(xué)習(xí)的朋友可以測(cè)試下，希望對(duì)大家有所幫助
2013-08-08
ASP.NET jQuery 實(shí)例7 通過(guò)jQuery來(lái)獲取DropDownList的Text/Value屬性值
這節(jié)我們將通過(guò)jQuery來(lái)獲取DropDownList的Text/Value屬性值,需要的朋友可以參考下
2012-02-02