//防新闻实现下拉菜单模式,很实用哦
<!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>