jQuery-ajax实现的弹出菜单效果
来源：互联网 发布：美国 儿童编程教育加盟 编辑：程序博客网 时间：2024/05/29 21:36
<!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-ajax实现的弹出菜单效果</title><style>.list{list-style-type:none;}.list li{line-height:30px;border-bottom:1px #666 dashed; }.list li a{color:#666;text-decoration:none;}.list li a:hover{color:#F90;}div{background-color:#DDEBF0;}</style><script language="javascript" type="text/javascript" src="../../include/jquery.js"></script><script>$(document).ready(function(){//点击每个li中a的时候触发事件$(".list li a").click(function (evt){//在jquery中阻止默认事件evt.preventDefault(); //阻止超链接跳转var t=$(this);//jquery中关于数据存储，取出存储在超链接上的数据 contentvar div =t.data("content");//如果说取到数据了，下拉显示出来if(div){//使用slideToggle来动态的显示/隐藏div div.slideToggle("slow"); }else{ //如果没有取到，则创建一个div,并且让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},"slow"); }); //先把新创建的div隐藏后再进行显示，目的就是要个优美的滑动效果 div.show("slow"); }});});</script></head><body><ul class="list"> <li><a href="20120331jquery-ajax-caidan-server.php?id=1">11111111</a></li> <li><a href="20120331jquery-ajax-caidan-server.php?id=2">222222222</a></li> <li><a href="20120331jquery-ajax-caidan-server.php?id=3">3333333333</a></li> <li><a href="20120331jquery-ajax-caidan-server.php?id=4">44444444444</a></li> <li><a href="20120331jquery-ajax-caidan-server.php?id=5">55555555555</a></li> <li><a href="20120331jquery-ajax-caidan-server.php?id=6">66666666666</a></li> </ul></body></html>
