ホームページ >バックエンド開発 >PHPチュートリアル >phpとjqueryで作成したプルアップ表示の効果についていくつか質問があります。
phpとjqueryで作成したプルアップ表示の効果についていくつか質問があります。
- WBOYオリジナル
- 2016-06-13 13:24:36730ブラウズ
phpとjqueryで作成したドロップダウン表示効果についていくつか質問があります
ファイルは次のとおりです
- HTMLコード
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->
<!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></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;}
.table { text-align:center; line-height:20px;
font-size:12px;
color:#000000;/*表格内字的颜色*/
border:1px solid #c0d3d9;/*表格的外边框及颜色*/
background-color:#dcebee;/*整个表格背景颜色*/
padding:1 2 1 2;/*表格内的四个边距离，上右下左*/
}
.table tr {height:20px;border:0px;}
.table td {border:1px solid #c0d3d9;}
.table a{ text-decoration:none; color:#000;}
.table a:hover{ color:#d36d1b; text-decoration:none;}
</style>
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></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("<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>
<ul class="list">
<li><a href="20120331jquery-ajax-caidan-server.php?id=1">11111111</a>
<table width="80%" border="0" cellpadding="0" cellspacing="0" class="table" >
<tr>
<td>标题</td>
<td>标题</td>
<td>标题</td>
<td>标题</td>
<td>标题</td>
<td>标题</td>
<td>标题</td>
<td>标题</td>
</tr>
<tr>
<td><a href="20120331jquery-ajax-caidan-server.php?id=1">文字内容</a></td>
<td>文字内容</td>
<td>文字内容</td>
<td>文字内容</td>
<td>文字内容</td>
<td>文字内容</td>
<td>文字内容</td>
<td>文字内容</td>
</tr>
</table>
</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>
このphpの出力は次のとおりです。 content
if ( $id==1){
echo "11111111
11111111
11111111
11111111
"; >
}
========================================= ======== =======
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。