JQuery菜單效果實(shí)例詳解

　　最終要達到的效果是如圖所示：

　　當單擊菜單項的時(shí)候，可以實(shí)現菜單的折疊與展開(kāi)，這是我們在網(wǎng)頁(yè)上經(jīng)�？吹降囊粋�(gè)效果。在這里的實(shí)現主要應用是CSS控制樣式然后配合jquery實(shí)現。

　　自己的感想：這里比如說(shuō)綁定要跳轉的頁(yè)面，只是靜態(tài)的綁定，不能動(dòng)態(tài)的綁定，我在開(kāi)發(fā)過(guò)程中用到的動(dòng)態(tài)綁定是結合asp.net的treeview控件實(shí)現的。不知道大家還有沒(méi)有更好的辦法。

　　前臺頁(yè)面代碼：

　　<%@ page="" language="C#" autoeventwireup="true" codefile="menu.aspx.cs" inherits="menu">

　　這次我們要實(shí)現的是下面的效果，當鼠標滑動(dòng)到菜單項的時(shí)候，子菜單顯示；當鼠標移開(kāi)的時(shí)候，菜單收起。在這里，我們還解決了在滑動(dòng)門(mén)會(huì )有的問(wèn)題，就是當鼠標快速滑動(dòng)的時(shí)候，會(huì )不停地觸發(fā)，這個(gè)問(wèn)題。頁(yè)面的代碼如下：

　　菜單項1

　　子菜單11

　　子菜單12

　　菜單項2

　　子菜單21

　　子菜單22

　　菜單項3

　　子菜單31

　　子菜單32

　　菜單項1

　　子菜單11

　　子菜單12

　　菜單項2

　　子菜單21

　　子菜單22

　　菜單項3

　　子菜單31

　　子菜單32

　　CSS(menu.css)ul,li { list-style-type:none; /*如果不加margin在搜狗瀏覽器中不能左對齊*/ margin:0px; padding:0px; } .main,.hmain { background-image: url("../images/title.gif"); background-repeat:repeat-x; width:100px; } .main a,.hmain a { background-image:url("../images/collapsed.gif"); background-repeat:no-repeat; background-position:3px center; text-decoration:none; color:White; /*下面是用來(lái)保證鼠標只要停留在li上就可以響應，也就相當于讓li的響應區域擴充了*/ display:block; padding-left:20px; padding-bottom:3px; } li { background-color:#EEEEEE; } .main li a,.hmain li a { color:Black; background-image:none; } .main ul,.hmain ul { display:none; } /*橫向菜單的樣式*/ .hmain { float:left; } menu.js///

　　$(document).ready(function () { var main = $(".main>a"); main.click(function () { var ulNode = $(this).next("ul"); // if (ulNode.css("display") == "none") { // ulNode.css("display", "block"); // } // else { // ulNode.css("display", "none"); // } //百葉窗的效果 ulNode.slideToggle("normal"); }); //現在的這個(gè)變量用來(lái)解決鼠標快速滑動(dòng)問(wèn)題clearInterval(setTimeoutId); nodeLi.children("ul").slideUp(); var setTimeoutId; $(".hmain").hover(function () { var nodeLi = $(this); setTimeoutId = window.setTimeout(function () { nodeLi.children("ul").slideDown(); }, 300) }, //上面的函數是鼠標進(jìn)入的操作，下面的操作是鼠標移出的操作。 function () { //開(kāi)始的時(shí)候，我在這里犯了一個(gè)錯誤，應該重新定義一下nodeLi var nodeLi = $(this); clearTimeout(setTimeoutId); if (nodeLi.children("ul").length != 0) { nodeLi.children("ul").slideUp(); }; }); }); 以上兩種菜單效果，大家有沒(méi)有掌握，希望這篇文章可以幫助到大家。

【JQuery菜單效果實(shí)例詳解】相關(guān)文章：

JavaScript中push(),join() 函數實(shí)例詳解09-05

Java文件解壓縮實(shí)例詳解201607-26

關(guān)于jquery簡(jiǎn)單圖片切換顯示效果實(shí)現方法介紹10-01

jQuery程序設計08-05

jquery提交按鈕的代碼07-28

常見(jiàn)的麥當勞日語(yǔ)菜單09-03

淺析jQuery 遍歷函數javascript08-06

jQuery中prev()方法用法07-16

jQuery中replaceAll()方法用法10-15

如何理解jquery事件冒泡09-15