最近由於專案需要一個簡單的多層下拉選單選單但是由於業務和樣式上的要求，為了簡潔，在網上找了很多導航選單控制都不大適合，所以突發奇想自己寫個吧~該動手就動手啊~ HTML部分 複製程式碼 程式碼如下: >SuperFish 一級li 1 二級li 1 二級li 2 三級li 1 三級li 2 a> 三級li 3 三級li 4 三級li 5 三級li 6 四級li 1 四級li 2 li> 二級li 3 三級li 6 三級li 7 三級li 8 三級li 9 三級li 10 二級li 4 三級li 11 三級li 12 三級li 13 三級li 14 三級li 15 li> 一級li 2 二級li 11 Javascript部分 複製程式碼 程式碼如下: <BR>var navigationBar = function () { <BR>//使用時將testid屬性換成href屬性即可<BR> var currentUrlHref = "jj"; <BR>var root = $("ul[hid='root']"); <BR>$(root).find(">li").attr("first_level", true ); <BR>$(root).find(">li>a").addClass("nav_first_style"); <BR>//遞歸向下查找可展開元素並且綁定toggle展開事件<BR>var searchChildren = function (root) { <BR>if (root.find(">li").length > 0) { <BR>$(root).addClass("ul_style"); <BR>var liChildren = root.find (">li"); <BR>$(liChildren).each(function (idx, item) { <BR>searchChildren($(item)); <BR>}) <BR>} else if (root.find (">ul").length > 0) { <BR>$(root).addClass("li_style"); <BR>if ($(root).attr("first_level") != true.toString() ) { <BR>$(root).find(">a").addClass("li_style_a"); <BR>} <BR>var aLink = $(root).find(">a"); <BR>//初始裝載的時候判斷當前url是不是和導航列中的東西匹配<BR>if (currentUrlHref == $(aLink).attr("testid")) { <BR>findInitPosition(aLink); <BR>} <BR>$(aLink).toggle(function () { <BR>$(this).addClass("li_style_a_selected"); <BR>$(this).parent().find(">ul") .show("fast"); <BR>//隱藏所有非一級節點下的所有兄弟元素<BR>if ($(this).parent().attr("first_level") != true.toString() ) { <BR>$(this).parent().siblings().find(">a").removeClass("li_style_a_selected"); <BR>$(this).parent().siblings().each (function (idx, item) { <BR>removeClassAndHide(item); <BR>}) <BR>} else { <BR>$(this).addClass("nav_first_style_selected"); <BR>$(this). removeClass("li_style_a_selected"); <BR>$(this).parent().siblings().find(">a").removeClass("nav_first_style_selected"); <BR>$(this).parent(). siblings().each(function (idx, item) { <BR>removeClassAndHide(item); <BR>}) <BR>} <BR>}, function () { <BR>if ($(this).parent ().attr("first_level") == true.toString()) { <BR>$(this).addClass("nav_first_style_selected"); <BR>$(this).parent().siblings().find (">a").removeClass("nav_first_style_selected"); <BR>} <BR>removeClassAndHide($(this).parent()); <BR>}) <BR>var ulChildren = root.find("> ul"); <BR>$(ulChildren).each(function (idx, item) { <BR>$(item).hide(); <BR>searchChildren($(item)); <BR>}); <BR>} else { <BR>if ($(root).attr("first_level") != true.toString()) { <BR>$(root).find(">a").addClass(" li_style_a"); <BR>} <BR>$(root).addClass("li_style"); <BR>$(root).click(function () { <BR>if ($(root).attr(" first_level") != true.toString()) { <BR>$(this).find(">a").addClass("li_style_a_selected"); <BR>$(this).siblings().find(" >a").removeClass("li_style_a_selected"); <BR>$(this).siblings().each(function (idx, item) { <BR>removeClassAndHide(item); <BR>addFirstLevelClass(item); 🎜>}) <BR>} else { <BR>$(this).find(">a").addClass("nav_first_style_selected"); <BR>$(this).find(">a").removeClass ("li_style_a_selected"); <BR>$(this).siblings().find(">a").removeClass("nav_first_style_selected"); <BR>removeClass>AndHide(this); <BR>} <BR>removeClass>AndHide(this); <BR>} <BR>} <🎜}) <BR>if (currentUrlHref == $(root).find(">a").attr("testid")) { <BR>findInitPosition($(root).find(">a")); <BR>} <BR>} <BR>} <BR>//遞歸查找初始位置<BR>var findInitPosition = function (aLink) { <BR>var currentLi = $(aLink).parent(); <BR>if ( $(currentLi).parent().parent().find(">a").length > 0) { <BR>findInitPosition($(currentLi).parent().parent().find(">a" )); <BR>} <BR>if ($(currentLi).find(">ul").length > 0) { <BR>$(currentLi).find(">ul").show("fast "); <BR>} <BR>if ($(currentLi).attr("first_level") != true.toString()) { <BR>$(currentLi).find(">a").addClass( "li_style_a_selected"); <BR>} else { <BR>$(currentLi).find(">a").addClass("nav_first_style_selected"); <BR>} <BR>} <BR>//遞歸向下刪除所有子節點的選取樣式<BR>var removeClassAndHide = function (li) { <BR>if ($(li).attr("first_level") != true.toString()) { <BR>$(li) .find(">a").removeClass("li_style_a_selected"); <BR>$(li).find(">ul").hide("fast"); <BR>if ($(li).find (">ul").length > 0) { <BR>$(li).find(">ul>li").each(function (idx, item) { <BR>removeClassAndHide(item); <BR> }); <BR>} <BR>} else if ($(li).attr("first_level") == true.toString()) { <BR>$(li).find(">ul"). hide("fast"); <BR>$(li).find(">ul>li").each(function (idx, item) { <BR>removeClassAndHide(item); <BR>}) <BR> } else { <BR>$(li).find(">ul").show("fast"); <BR>$(li).find(">ul>li").each(function (idx, item) { <BR>removeClassAndHide(item); <BR>}) <BR>} <BR>} <BR>//遞歸向上加上第一層節點樣式<BR>var addFirstLevelClass = function (li) { <BR>if ($(li).attr("first_level") != true.toString()) { <BR>addFirstLevelClass($(li).parent().parent()); <🎜>}else { <BR>if (!$(li).find(">a").hasClass("nav_first_style_selected")) { <BR>$(li).find(">a").addClass("nav_first_style_selected" ); <BR>$(li).siblings().find(">a").removeClass("nav_first_style_selected"); <BR>} <BR>} <BR>} <BR>//建立導航<BR>var createNav = function () { <BR>searchChildren(root); <BR>} <BR>createNav(); <BR>} <BR>var initNav = new navigationBar(); <BR> 🎜> 不過暫時還沒有封裝成類似jquery的寫法，其實還可以繼續封成一個控制項~
