jQuery 淡入淡出、展開(kāi)收縮菜單實(shí)現(xiàn)代碼

更新時(shí)間：2009年12月19日 01:57:41 作者：

jQuery淡入淡出、展開(kāi)收縮菜單

效果圖:

運(yùn)行以后，刷新下即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery淡入淡出、展開(kāi)收縮菜單</title> <style type="text/css"> ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;}</style> <script language="javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $(".menu").hover( function(){ //$(".content").fadeIn(800); // 淡入 $(".content").slideDown(800); // 展開(kāi) },function(){ //$(".content").fadeOut(1000) // 淡出 $(".content").slideUp(1000)　　　 // 收縮 }); }) </script> </head> <body> <ul> <li id="83uzamy"    class="menu"> <a>彈出菜單</a> <ul class="content"> <li><a href="#">菜單內(nèi)容1</a></li> <li><a href="#">菜單內(nèi)容2</a></li> <li><a href="#">菜單內(nèi)容3</a></li> <li><a href="#">菜單內(nèi)容4</a></li> <li><a href="#">菜單內(nèi)容5</a></li> </ul> </li> </ul> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

用JQuery 判斷某個(gè)屬性是否存在hasAttr的解決方法
本篇文章介紹了，用JQuery 判斷某個(gè)屬性是否存在hasAttr的解決方法。需要的朋友參考下
2013-04-04
jQuery基礎(chǔ)知識(shí)點(diǎn)總結(jié)(必看)
下面小編就為大家?guī)?lái)一篇jQuery基礎(chǔ)知識(shí)點(diǎn)總結(jié)(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
jquery中關(guān)于bind()方法的使用技巧分享
這篇文章主要給大家分享了jquery中關(guān)于bind()方法的使用技巧，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-03-03
jquery dialog鍵盤(pán)事件代碼
jquery dialog鍵盤(pán)事件代碼，檢測(cè)回車等事件的觸發(fā)問(wèn)題。
2010-08-08
JQuery的自定義事件代碼,觸發(fā),綁定簡(jiǎn)單實(shí)例
下面的代碼是所有它自己的自定義事件觸發(fā)。你可以綁定到這個(gè)自定義事件，并提高它時(shí)，你要執(zhí)行的代碼里面綁定。
2013-08-08
jquery實(shí)現(xiàn)奇偶行賦值不同css值
通常為了讓頁(yè)面呈現(xiàn)的更為美觀，我們喜歡在奇偶行加上不同的顏色
2012-02-02
基于jquery用于查詢操作的實(shí)現(xiàn)代碼
通過(guò)javascript得到用戶操作改變url參數(shù)從而實(shí)現(xiàn)某些功能，如查詢(具體的查詢由服務(wù)器端代碼得到url中的參數(shù)組成查詢語(yǔ)句實(shí)現(xiàn))。
2010-05-05
jQuery接受后臺(tái)傳遞的List的實(shí)例詳解
這篇文章主要介紹了jQuery接受后臺(tái)傳遞的List的實(shí)例詳解的相關(guān)資料,這里提供了前臺(tái)代碼和后臺(tái)代碼的實(shí)現(xiàn)，需要的朋友可以參考下
2017-08-08
JQuery WEUI Select 組件增加搜索欄示例demo
這篇文章主要介紹了JQuery WEUI Select 組件增加搜索欄示例demo,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-10-10
jQuery 選擇器項(xiàng)目實(shí)例分析及實(shí)現(xiàn)代碼
首先廢話一句，jQuery選擇器真心很強(qiáng)大！接下來(lái)詳細(xì)介紹jQuery 選擇器項(xiàng)目實(shí)例實(shí)現(xiàn)方式
2012-12-12