个人中心
gpt4 book ai didi

jquery - 表格行右移

转载 作者：行者123 更新时间：2023-11-27 22:39:28 24 4
gpt4 key购买 nike

当我使用 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; }

最佳答案

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

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

请发布您的 JS 文件，以便于调试。

关于jquery - 表格行右移，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1128294/

24 4 0
文章推荐： javascript - JQuery 对新的替代解决方案的意见或建议
文章推荐： javascript - jQuery选择div问题
文章推荐： javascript - 选择并拖动以获取选定的元素
文章推荐： javascript - Kendo 组合框使用虚拟检索所选项目
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com