jquery实现新闻菜单选项

最新推荐文章于 2024-09-22 11:17:00 发布

xi_weina

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量685

点赞数

文章标签： jquery div javascript function xhtml class

本文链接：https://blog.csdn.net/xi_weina/article/details/7418856

版权

//防新闻实现下拉菜单模式，很实用哦
<!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=utf-8" />
<title>jquery实现新闻菜单选项</title>
<style type="text/css">
.list{
	list-style-type:none
	}
	.list li{
		line-height:30px;
		border-bottom:1px dashed #666
		}
	.list li a{
		color:#666;
		text-decoration:none;
		}	
		
	.list li a:hover{
		color:#f90;
		}
		div{
			background:#ddebf0}
</style>
<script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js">
</script>
<script type="text/javascript" language="javascript">
$(function(){
	//点击每个li中的a时触发事件
	$("li a").click(function(evt){
		//在jquery中默认超链接点完就跑了,有一个阻止默认事件
		evt.preventDefault();//阻止超链接跳转
		var t=$(this);
		//jquery中关于数据存储
		var div=t.data("content");
		//如果说取到数据了，下拉显示
		if(div){
			//使用slideToggle来动态显示/隐藏div
			div.slideToggle("slow");
			}
		else{	
		//如果没有取到则创建div，并且让div显示到超链接后面
		//创建一个超链接
		div=$("<div></div>");
		//创建完div将其保存到超连接上
		t.data("content",div);
		//给div添加内容
		div.html("loading................");
		//显示到超链接的后面去
		t.after(div);
		//获取原来的div高度
		var oh=div.height();
		//先把新设置的div隐藏
		div.hide();
		//怎样把内容写入div
		div.load(t.attr("href"),function(){
			//获取新的高度
			var nh=div.height();
			//把当前的div设置为以前的
			div.height(oh);
			//执行动画效果，让高度从oh到nh
			div.animate({height:nh});
			});
			div.show();
		}
		});
	
	})
</script>
</head>

<body>
<ul class="list">
<li><a href="server.php?id=1">1111111111111111111</a></li>
<li><a href="server.php?id=2">22222222222222222222222</a></li>
<li><a href="server.php?id=3">33333333333333</a></li>
<li><a href="server.php?id=4">44444444444444444</a></li>
<li><a href="server.php?id=5">55555555555</a></li>
<li><a href="server.php?id=6">6666666666666666666</a></li>

</ul>
</body>
</html>