php,jquery点击下拉效果,怎么实现下拉后的效果和之前那列效果一样?

luobutou 发布于 2012/07/02 12:29
阅读 585
收藏 0
<!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=gb2312" /> 
<title>tableFrame_simple</title>
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css"> 
body{ 
width:auto; 
height:auto; 
padding:0; 
margin:20px 0; 
font-size:12px; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
ul{ 
clear:both; 
padding:0; 
margin:0; 
list-style:none; 
#tableFrame{ 
width:875px; /*需要修改*/ 
height:auto; 
border-top:#000 1px solid; 
border-left:#000 1px solid; 
padding:0; 
margin:0 auto; 
font-size:12px; 
#tableFrame:after { 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
li{ 
float:left; 
display: block; 
width:120px; /*需要修改*/ 
height:auto; 
padding:2px; 
margin:0; 
border-right:#000 1px solid; 
border-bottom:#000 1px solid; 
line-height:16px; 
color:000;
/*
*/
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;}


/* 表格标题*/ 
#tableFrameTitle ul{} 
#tableFrameTitle ul li{ 
background:gray; 
text-align:center; 
color:#fff; 

/* 表格内容*/ 
#tableCase ul{} 
#tableCase ul li{} 

/* 单个表格特定样式*/ 
.tableCaseThree{color:#329A02;} 
.tableCaseFive{color:#f00;} 
.tableCaseSeven{color:#f00;} 
</style>
<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=$("<ul></ul>");

//创建完了div以后,先把div保存到超链接上
t.data("content",div);

//给div添加内容
div.html("<img src=\"images/ajax-loader-eeeeee.gif\">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> 
<div id="tableFrame"> 
    <div id="tableFrameTitle"> 
        <ul> 
            <li>ID</li> 
            <li>当日排名</li> 
            <li>排名变化趋势</li> 
            <li>一周平均排名</li> 
            <li>排名变化趋势</li> 
            <li>一月平均排名</li> 
            <li>排名变化趋势</li> 
        </ul> 
    </div> 
    <div id="tableCase"> 
    <!--此处开始循环 --> 
        <ul  class="list"> 
            <li><a href="20120331jquery-ajax-caidan-server.php?id=2">0001</a></li> 
            <li>1234</li> 
            <li>↑ 200</li> 
            <li>1856</li> 
            <li>↓ 56</li> 
            <li>1650</li> 
            <li>↓ 156</li> 
        </ul>
<div>
<ul>
<li>11111</li>
<li>222</li>
<li>3333</li>
<li>1856</li>
<li>56</li>
<li>1650</li>
<li>156</li>
</ul>
</div>
    <!--到此循环结束 -->
<!--此处开始循环 --> 
        <ul  class="list"> 
            <li><a href="20120331jquery-ajax-caidan-server.php?id=1">0002</a></li> 
            <li>1234</li> 
            <li>↑ 200</li> 
            <li>1856</li> 
            <li>↓ 56</li> 
            <li>1650</li> 
            <li>↓ 156</li> 
        </ul> 
    <!--到此循环结束 --> 
    <!--<ul> 
            <li class="tableCaseOne">0002</li> 
            <li class="tableCaseTwo">1234</li> 
            <li class="tableCaseThree">↑ 200</li> 
            <li class="tableCaseFour">1856</li> 
            <li class="tableCaseFive">↓ 56</li> 
            <li class="tableCaseSix">1650</li> 
            <li class="tableCaseSeven">↓ 156</li> 
        </ul> 
        <ul> 
            <li class="tableCaseOne">0003</li> 
            <li class="tableCaseTwo">1234</li> 
            <li class="tableCaseThree">↑ 200</li> 
            <li class="tableCaseFour">1856</li> 
            <li class="tableCaseFive">↓ 56</li> 
            <li class="tableCaseSix">1650</li> 
            <li class="tableCaseSeven">↓ 156</li> 
        </ul> 
        <ul> 
            <li class="tableCaseOne">0004</li> 
            <li class="tableCaseTwo">1234</li> 
            <li class="tableCaseThree">↑ 200</li> 
            <li class="tableCaseFour">1856</li> 
            <li class="tableCaseFive">↓ 56</li> 
            <li class="tableCaseSix">1650</li> 
            <li class="tableCaseSeven">↓ 156</li> 
        </ul> 
        <ul> 
            <li class="tableCaseOne">0005</li> 
            <li class="tableCaseTwo">1234</li> 
            <li class="tableCaseThree">↑ 200</li> 
            <li class="tableCaseFour">1856</li> 
            <li class="tableCaseFive">↓ 56</li> 
            <li class="tableCaseSix">1650</li> 
            <li class="tableCaseSeven">↓ 156</li> 
        </ul>--> 
    </div> 
</div> 
</body> 
</html>

------实现php如下--- 11111111
11111111
11111111
"; } if($id==2){ echo "222222
222222
222222
12222222
"; echo "111111"; /*echo "
  • 11111
  • 222
  • 3333
  • 1856
  • 56
  • 1650
  • 156
  • ";*/ } if($id==3){ echo "3333
    33333
    3333
    133333
    "; } if($id==4){ echo "44444
    4444444
    444444
    44444444
    "; } if($id==5){ echo "555555
    5555555
    55555555
    55555555
    "; } if($id==6){ echo "6666
    6666666
    66666666
    "; } ?>
    加载中
    0
    l
    luobutou
    我把php输出的东西直接拷贝到html页面中显示的是正常的
    返回顶部
    顶部