当前位置:编程学习 > JS >>

jQuery可伸缩的竖向下拉导航菜单

jQuery可伸缩的竖向下拉导航菜单代码,向上展开,当然也可伸缩起来,请注意,如果预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;在实际使用中,不会出现这样的问题。
答案:<!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>
<title>jQuery可伸缩的竖向下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body{font-size:12px;line-height:20px;}
dl{width:150px;}
.even{background:#669999;color:#fff;}
.odd{background:#CCCCCC;color:#fff;}
.linglei{background:#999900;color:#fff;}
</style>
<script src="/ajaxjs/jquery1.3.2.js"></script>
</head>
<body>
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br>
<dl>
	<dt class="even"> 建站服务</dt>
	<dd>音乐播放器</dd>
	<dd>计数器</dd>
	<dd>投票系统</dd>
	<dd>评论系统</dd>
	<dt class="even"> 站长工具</dt>
	<dd>收录查询</dd>
	<dd>ALEXA查询</dd>
	<dd>PR查询</dd>
	<dt class="even"> 网页特效</dt>
	<dd>导航菜单</dd>
	<dd>图片特效</dd>
</dl>
<script type="text/javascript">
$('dt').click(
	function(){
		$(this).nextUntil('dt').slideToggle(400);
	}
);
</script>
</body>
</html>

上一个:点击展开的竖向二级下拉菜单
下一个:嵌套的网页选项卡

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,