亚洲精品中文字幕无乱码_久久亚洲精品无码AV大片_最新国产免费Av网址_国产精品3级片

jQuery

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

時(shí)間:2024-06-09 19:22:36 jQuery 我要投稿
  • 相關(guān)推薦

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

  最終要達(dá)到的效果是如圖所示:

  當(dāng)單擊菜單項(xiàng)的時(shí)候,可以實(shí)現(xiàn)菜單的折疊與展開,這是我們在網(wǎng)頁上經(jīng)常看到的一個(gè)效果。在這里的實(shí)現(xiàn)主要應(yīng)用是CSS控制樣式然后配合jquery實(shí)現(xiàn)。

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

  前臺頁面代碼:

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

  這次我們要實(shí)現(xiàn)的是下面的效果,當(dāng)鼠標(biāo)滑動(dòng)到菜單項(xiàng)的時(shí)候,子菜單顯示;當(dāng)鼠標(biāo)移開的時(shí)候,菜單收起。在這里,我們還解決了在滑動(dòng)門會有的問題,就是當(dāng)鼠標(biāo)快速滑動(dòng)的時(shí)候,會不停地觸發(fā),這個(gè)問題。頁面的代碼如下:

  菜單項(xiàng)1

  子菜單11

  子菜單12

  菜單項(xiàng)2

  子菜單21

  子菜單22

  菜單項(xiàng)3

  子菜單31

  子菜單32

  菜單項(xiàng)1

  子菜單11

  子菜單12

  菜單項(xiàng)2

  子菜單21

  子菜單22

  菜單項(xiàng)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; /*下面是用來保證鼠標(biāo)只要停留在li上就可以響應(yīng),也就相當(dāng)于讓li的響應(yīng)區(qū)域擴(kuò)充了*/ 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"); }); //現(xiàn)在的這個(gè)變量用來解決鼠標(biāo)快速滑動(dòng)問題clearInterval(setTimeoutId); nodeLi.children("ul").slideUp(); var setTimeoutId; $(".hmain").hover(function () { var nodeLi = $(this); setTimeoutId = window.setTimeout(function () { nodeLi.children("ul").slideDown(); }, 300) }, //上面的函數(shù)是鼠標(biāo)進(jìn)入的操作,下面的操作是鼠標(biāo)移出的操作。 function () { //開始的時(shí)候,我在這里犯了一個(gè)錯(cuò)誤,應(yīng)該重新定義一下nodeLi var nodeLi = $(this); clearTimeout(setTimeoutId); if (nodeLi.children("ul").length != 0) { nodeLi.children("ul").slideUp(); }; }); }); 以上兩種菜單效果,大家有沒有掌握,希望這篇文章可以幫助到大家。

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

杭州的年夜飯菜單03-22

江西年夜飯菜單01-18

Word 2000“幫助”菜單使用方法03-19

again用法詳解08-25

眼神禮儀的詳解03-09

關(guān)于DNS的知識詳解07-16

男士化妝步驟詳解11-09

非洲航線知識詳解11-03

茶葉采摘的方法詳解05-17

山西年夜飯家常菜菜單及做法03-26