当我使用 Jquery 加载更多信息时，我的表似乎有问题。
当我点击“更多信息”链接时，更多内容会滑落但不幸的是似乎 展开表格吧什么的。
以下是为更好地解释而展开的页面图片:
点击“更多信息”链接:
这是页面源代码:
<!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>Title Here</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="listing.js"></script>
</head>
<body>
<div id="login-nav">
<a href="login.php">Please Login!</a> </div>
<div id="top-nav">
<a href="index.php">Home</a>
<a href="buy.php">Sites</a>
<a href="register.php">Sign-Up</a>
<a href="login.php">Login</a>
<a href="myac.php">My Account</a>
</div>
<div id="page-wrap">
<div id="curve-container"></div>
<div id="main-content">
<div id="article-area">
<h1>Sites</h1>
<div id="output-listings">
<div class="main-info">
<table class="listings">
<tbody>
<tr id="more-info-1" class="mi-1">
<td>
<div class="more-information-1"></div>
</td>
</tr>
<tr id="main-info-1">
<td>Leftlane News</td>
<td>www.leftlanenews.com/</td>
<td><a id="link-1" class="more-info-link" href="#">More info</a></td>
</tr>
<tr id="more-info-2" class="mi-2">
<td>
<div class="more-information-2"></div>
</td>
</tr>
<tr id="main-info-2">
<td>Motor Authority</td>
<td>www.motorauthority.com/ </td>
<td><a id="link-2" class="more-info-link" href="#">More info</a></td>
</tr>
<tr id="more-info-3" class="mi-3">
<td>
<div class="more-information-3"></div>
</td>
</tr>
<tr id="main-info-3">
<td>Autoblog</td>
<td>http://www.autoblog.com/</td>
<td><a id="link-3" class="more-info-link" href="#">More info</a></td>
</tr>
</tbody>
</table>
</div>
</div><!--end output-listings-->
</div>
<div class="clear"></div>
</div>
<div id="footer"></div>
<div id="curve-container"></div>
<div id="features">
<div id="p-header">
<h1>Header Here</h1>
<p>Text Here.</p>
</div>
</div>
<div id="ft-bottom"></div>
<div id="text-footer"><p>Copyright © 2009 . All rights reserved.</p></div>
</div>
</body>
</html>
有人知道怎么回事吗？
如果有人需要看一下，这里是 CSS 文件:
* {
margin: 0;
padding: 30px 45px;
}
body {
background: #EFEFEF none repeat scroll 0 0;
color: #333333;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-size: 12px;
font-size-adjust: none;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 18px;
}
/* TOOLBOX */
.clear { clear: both; }
/* END TOOLBOX */
#top-nav {
text-align: right;
}
#top-nav a {
padding: 10px 30px;
text-decoration: none;
}
#top-nav a:link {
color: #333333;
}
#top-nav a:visited {
color: #999999;
}
#top-nav a:hover {
color: #0088CC;
}
#page-wrap {
}
#curve-container {
background: url(content_bgtop.gif) no-repeat scroll 0 0;
padding: 2px 26px;
width: 932px;
}
#main-content {
width: 984px;
background: url(content_bg.gif) repeat-y;
}
#article-area {
}
#footer {
background: url(content_bgbottom.gif) no-repeat;
width:932px;
}
#features {
width: 984px;
background: url(content_bg.gif) repeat-y;
}
#p-header {
}
#ft-bottom {
background: url(content_bgbottom.gif) no-repeat;
width:932px;
}
#text-footer {
font-size: 10;
text-align: center;
}
.spacer{clear:both; height:1px;}
.formlogin {
margin: 0 auto;
width: 720px;
padding: 40px;
}
#loginform {
border: solid 2px #333333;
background: #EFEFEF;
}
#loginform label {
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#loginform .small {
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#loginform input {
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#output-listings {
margin-top: -150px;
margin-bottom: 20px;
padding: 0px;
}
table {
width: 800px;
}
#listing-db {
padding: 0px;
}
tr.hover td { background: #FDFFE7; }
table { border-collapse:collapse;
color:#3F3F3F;
font-family:arial,helvetica,sans-serif;
border-top:1px solid #DFDFDF;
}
#output-listings { padding-top: 150px; }
.mi { display: none;
width: 800px; }
最佳答案
您如何通过 JS/jQuery“显示”更多信息？您是使用 .toggle() 还是手动设置显示？
如果元素是表格元素，您可能会将其显示设置为 block 而不是 table-cell
请发布您的 JS 文件，以便于调试。
关于jquery - 表格行右移，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1128294/