jquery實現動態菜單的方式跟jquery彈出窗口的方式差不多，都是采用JavaScript操作css的方式。
其具體步驟可以分為以下幾步：
•創建一個含有要表達的菜單的html頁面
. 代碼如下:
<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>
•創建一個css文件來控制菜單的顯示
. 代碼如下:
/*讓所有的li都不顯示小圓點，可以使用css標簽選擇器*/
li{
/*使list前的小圓點消失*/
list-style: none;
/*縮進效果*/
margin-left: 18px;
/*隱藏菜單*/
display: none;
}
a{
/*文字的顯示方式*/
text-decoration: none;
}
•創建一個JavaScript文件來控制菜單的顯示
. 代碼如下:
/*
* 點擊主菜單，子菜單顯示；再次點擊主菜單，子菜單隱藏
* 需要編寫代碼，使得主菜單在裝載時添加onclick事件，使得點擊主菜單可以顯示子菜單
* 注冊頁面裝載時執行的方法
*/
$(document).ready(function(){
//var uls = $("ul");
//找到ul下的a節點
var as = $("ul > a");
as.click(function(){
//首先找到當前ul中的li，然後讓li顯示出來
//獲取當前被點擊的ul節點
var aNode = $(this);
//找到被點擊ul節點下的所有li節點
var lis = aNode.nextAll("li");
//顯示或隱藏ul的li子節點們
lis.toggle("slow");
});
});