JQuery經典例子：可拉伸選單
簡介：
幾乎所有的網頁都會有可以伸縮的選單，它的實現也比較簡單。可伸縮的選單實現的思路是這樣的：在HTML中將
選單寫好，在css中將選單的樣式設定好並且將二級選單隱藏起來，最後就是在JS中將隱藏的選單顯示出來。如果對
程式碼：
HTML：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="expendmean.aspx.cs" Inherits="Expendmean.expendmean" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>可以拉伸的選單</title> <link href="CSS/expendmean.css" rel="stylesheet" /> <script src="JS/expendmean.js"></script> <script src="JS/jquery.js"></script> <script src="JS/expendmean.js"></script> </head> <body> <form id="form1" runat="server"> <ul> <li class="main"> <a href="#">一年級</a> <ul> <li> <a href="#">體育部</a> </li> <li> <a href="#">教育部</a> </li> <li> <a href="#">教務部</a> </li> </ul> </li> <li class="main"> <a href="#">一年級</a> <ul> <li> <a href="#">體育部</a> </li> <li> <a href="#">教育部</a> </li> <li> <a href="#">教務部</a> </li> </ul> </li> <li class="main"> <a href="#">一年級</a> <ul> <li> <a href="#">體育部</a> </li> <li> <a href="#">教育部</a> </li> <li> <a href="#">教務部</a> </li> </ul> </li> </ul> </form> </body> </html>
CSS：
ul,li { /*清楚ul 和li 的小圓點*/ list-style:none; } ul { /*清除ui 和 li 的縮排值，讓他們緊靠左邊*/ /*因為整個li都在UI中，所以只設置UI 就可以了*/ padding:0; margin :0; } .main { /*將選單的背景設定為：*/ background-image:url('../Images/title.gif'); /*該圖片設定為不重疊*/ background-repeat :repeat-x; width :120px; } /*將選單的文字設定為這個顏色*/ li { background-color :#EEEEEE; } a { /*取消所有下劃線*/ text-decoration :none; padding-left :20px; display:block; display:inline-block; width :100px; padding-top :3px; padding-bottom:3px; }/*設定一級選單*/ .main a { color:white; background-image:url('../Images/collapsed.gif'); background-repeat:no-repeat; background-position:3px center; } /*設定二級選單*/ .main li a { color:black ; background-image :none; } /*將二級選單隱藏*/ .main ul { display: none; }
效果：
J S ：
$(document).ready(function () { //頁面完成dom裝載時，執行此程式碼 //一級選單：找到類 main 的子節點 a，並新增單擊事件 $(".main a").click(function () { //更換三角指示圖示 var pictur = $(this); changeIcon(pictur); //找到main 下面的a 的下面的ui var secondNode = $(this).next("ul"); //判斷該ui事件的css 屬性 if (secondNode.css("display") == "none") { secondNode.css("display", "block"); } else { secondNode.css("display","none");} }); //找到二級選單，並設定單擊事件 $(".main li a").click(function () { alert("該選單沒有下一步事件"); }); }); //定義函式：更改三角指示圖示函式 function changeIcon(mainNode) { if (mainNode) { //如果該節點的背景的圖片裡面包含collapsed.gif,就把它改成另一個，如果不包含就改回來。 if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) { mainNode.css("background-image", "url('../Images/expanded.gif')"); } else { mainNode.css("background-image", "url('../Images/collapsed.gif')"); } } }
效果：
注意點：
1.$符內查詢的選擇：在JS中如何準確地獲取HTML元素很重要，所以要熟記或歸納好各種獲取HTML元素的方法。
例如在本例子中$(".main>a")，就是獲取HTML中類選擇器為main的直接子節點。另外還有如何獲取ID選擇器、span標
籤、偶數段落、第一個字元等等各種方法。
2.三角圖示的方向轉換：這個功能其實就是增加一個判斷，如果是A情況就出a圖，如果是B情況就出b圖。運用到
的方法就是css中的indexof()方法----是否包含。
3.關於點選觸發可拉伸選單事件：其實在JQuery中設定了很多更加簡便的方法，例如 A.show()、A.hide() 或者
A. slideDown()、B.slidUp()等方法，它們還可以新增slow、normal、fast 或具體的毫秒數來確定選單下拉的速
度。
感受：
1.火狐的快取很煩人，有時候程式碼什麼的都對，就是不出現對應的效果。這時候可以關閉火狐，或者
Ctrl+Shift+Delete 清除快取。
2.其實以前的時候看視訊總是“看著”完成專案的，沒有動手敲，所以也就沒有什麼特別的感受，最近開始敲
了（不敲不行啊！！！）才發現，動手實踐才能發現問題，儘管問題很小，但是真的有幫助。好了，言盡於此，希望
自己的學習能力能越來越好。