Question

当我使用Jquery加载更多信息时，我的表似乎遇到了问题。

当我点击“更多信息”链接时，更多内容会向下滑动但不幸的是正确地扩展表格。

以下是要扩展的页面图片，以便更好地解释：

点击了

'更多信息'链接：

Click Here

以下是页面来源：

<!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 &copy; 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; }

Answer 1

你如何通过JS / jQuery“显示”更多信息？您使用.toggle()还是手动设置显示器？

如果元素是表格元素，您可能会将其显示设置为block而不是table-cell

请发布您的JS文件，以便更容易调试。

Answer 2

这是JS文件：

$(function(){
    $("tr").hover(function(){
        $(this).addClass("hover");
    }, function() {
        $(this).removeClass("hover");
    });

$('.more-info-link').click(function(){
    var id = $(this).attr('id');
    var num = id.substr(id.length-1,1);
    $('#more-info-'+num).toggle('fast');
    return false;
})


});

表行向右移动

2 个答案: