使用jquery做的伸缩菜单
<script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){//找到所有li标记中包含的ul标记//然后找到它的前一个标记（即<a>）,并添加click事件$("li").find("ul").prev().click(function(){//单击时让后面的兄弟切换样式$(this).next().toggleClass("myHide");});});</script><style type="text/css">#navigation{width:200px;}a{outline:none;}/*主菜单样式*/#navigation > ul{list-style-type:none;/*不显示项目符号*/margin:0;padding:0;}#navigation > ul > li{border-bottom:1px solid #FFFFFF;}#navigation > ul > li > a{display:block;padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #003300;/*左侧粗边阴影*/border-right:1px solid #003300;/*右侧边阴影*/}#navigation > ul > li > a:link,#navigation > ul > li > a:visited{background-color:#006633;color:#FFFFFF;}#navigation > ul > li > a:hover{background-color:#003300;color:#FFFF00;}/*子菜单样式*/#navigation ul li ul{list-style-type:none;/*不显示项目符号*/margin:0;padding:0;}#navigation ul li ul li{border-bottom:1px solid #FFFFFF;}#navigation ul li ul li a{display:block;padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #FF0000;/*左侧粗边阴影*/border-right:1px solid #FF0000;/*右侧边阴影*/}#navigation ul li ul li a:link,#navigation ul li ul li a:visited{background-color:#FF3333;color:#FFFFFF;}#navigation ul li ul li a:hover{background-color:#FF0000;color:#FFFF00;}#navigation ul li ul.myHide{display:none;}</style><body><div id="navigation"><ul id="listUL"><li><a href="#">home</a></li><li><a href="#">news</a><ul><li><a href="#">lasttestnews</a></li><li><a href="#">allnews</a></li></ul></li><li><a href="#">sports</a><ul><li><a href="#">basketball</a></li><li><a href="#">football</a></li><li><a href="#">volleyball</a></li><li><a href="#">goodball</a></li></ul></li><li><a href="#">weather</a><ul><li><a href="#">today's weather</a></li><li><a href="#">forecast</a></li></ul></li><li><a href="#">call me</a></li></ul></div></body>
页:
[1]