<!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中關於數據存儲，取出存儲在超鏈接上的數據 content
var 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>
jQuery-ajax實現的彈出菜單效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章