jQuery下拉菜单实现-优快云博客

jquery写的下拉菜单

css.css

ul,li{ /*清楚小圆点*/ list-style: none; } ul{ /*清楚差距*/ padding:0; margin: 0; } .main{ background-image: url(../image/nav_div.gif); /* background-color:#949494;*/ background-repeat:repeat-x; width:120px; } li{ background-color:#EEEEEE; } a{ text-decoration: none; padding-left: 25px; display: block; display: inline-block; width: 96px; padding-bottom: 2; padding-top: 2; } .main a{ color: purple; background-image: url(../image/ss.gif); background-repeat: no-repeat; font-size: 16; } .main li a{ color:black; background-image: none; padding-left: 35; } .main ul{ display: none; }

myjs.js

$(document).ready(function (){ //页面装载完成后执行的代码 $(".main > a").click(function (){ var ulnode = $(this).next("ul"); //以下是一套的显示和阴藏的 /*if(ulnode.css("display")=="none") { ulnode.css("display","block"); }else { ulnode.css("display","none"); }*/ //ulnode.show("fast");//毫秒slow normal fast // ulnode.toggle("300");//自己进行判断法 //ulnode.slideDown("300"); //ulnode.slideUp("300"); ulnode.slideToggle("300"); }); })

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>菜单效果</title> <mce:script type="text/javascript" src="js/jquery-1.4.2.js" mce_src="js/jquery-1.4.2.js"></mce:script> <mce:script type="text/javascript" src="js/myjs.js" mce_src="js/myjs.js"></mce:script> <link type="text/css" rel="stylesheet" href="css/css.css" mce_href="css/css.css"> </head> <body> <ul> <li class="main"> <a href="#" mce_href="#">山西</a> <ul> <li><a href="#" mce_href="#">太原</a></li> <li><a href="#" mce_href="#">大同</a></li> </ul> </li> <li class="main"> <a href="#" mce_href="#">北京</a> <ul> <li><a href="#" mce_href="#">海淀</a></li> <li><a href="#" mce_href="#">朝阳</a></li> </ul> </li> <li class="main"> <a href="#" mce_href="#">陕西</a> <ul> <li><a href="#" mce_href="#">西安</a></li> <li><a href="#" mce_href="#">延安</a></li> </ul> </li> </ul> </body> </html>