10

例如，我不明白为什么在单击“第 9 行”时垂直滚动条会自动移动到最高位置。进一步单击不会移动滚动条。谁能解释为什么，以及如何解决这个问题？我使用 Firefox 3.6.3。

HTML： 

<html>
    <head>
        <link rel="stylesheet" href="test.css" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script language="JavaScript" src="test.js"></script>
    </head>

    <body>
        <div>
            <table>
                <tr row='0'><td class='column1'>Line 0</td></tr>
                <tr row='1'><td class='column1'>Line 1</td></tr>
                <tr row='2'><td class='column1'>Line 2</td></tr>
                <tr row='3'><td class='column1'>Line 3</td></tr>
                <tr row='4'><td class='column1'>Line 4</td></tr>
                <tr row='5'><td class='column1'>Line 5</td></tr>
                <tr row='6'><td class='column1'>Line 6</td></tr>
                <tr row='7'><td class='column1'>Line 7</td></tr>
                <tr row='8'><td class='column1'>Line 8</td></tr>
                <tr row='9'><td class='column1'>Line 9</td></tr>
            </table>
        </div>
    </body>
</html>

JS：

$(document).ready(function() {
    $(".column1").each(function(index) {
        $(this).after("<td class='column2'>Details " + index + "</td>");
        $(this).toggle(function() { $("[row='" + index + "'] .column2").fadeIn("fast") },
                       function() { $("[row='" + index + "'] .column2").fadeOut("fast") });
    });
});

CSS：

div {
    overflow: auto;
    height: 100px;
    width: 300px;
    border: 1px solid blue;
}

.column1 {
    cursor: pointer;
    width: 100px;
    background-color: green;
    color: white;
}

.column2 {
    display: none;
    width: 200px;
    background-color: blue;
    color: white;
}
4

2 回答 2

6

在进行了一些试错测试之后，看起来这与当您淡入/淡出其中一个单元格时浏览器重新计算和重绘表格的时刻有关。您的代码没有任何问题，并且 jQuery 正确切换了单元格的“显示”属性 - 看起来这是 FF 中的一个小错误。

可能最简单的方法是避免切换表格单元格本身，而是切换 column2 单元格的内容，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <link rel="stylesheet" href="test.css" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script language="JavaScript">
        $(document).ready(function() {
            $("td.column1").each(function(index) {
                $(this).after('<td class="column2"><span class="details">Details ' + index + '</span></td>');
                $(this).toggle(
                  function(){$(this).siblings('.column2').children('span.details').fadeIn("fast")},
                  function(){$(this).siblings('.column2').children('span.details').fadeOut("fast")}
                ) 
            });
        });
        </script>
        <style type="text/css" media="screen">
          div {
              overflow: auto;
              height: 100px;
              width: 300px;
              border: 1px solid blue;
          }

          .column1 {
              cursor: pointer;
          }

          .column2 .details{
              display:none;
          }

        </style>
    </head>

    <body>
        <div>
            <table>
                <tr row='0'><td class='column1'>Line 0</td></tr>
                <tr row='1'><td class='column1'>Line 1</td></tr>
                <tr row='2'><td class='column1'>Line 2</td></tr>
                <tr row='3'><td class='column1'>Line 3</td></tr>
                <tr row='4'><td class='column1'>Line 4</td></tr>
                <tr row='5'><td class='column1'>Line 5</td></tr>
                <tr row='6'><td class='column1'>Line 6</td></tr>
                <tr row='7'><td class='column1'>Line 7</td></tr>
                <tr row='8'><td class='column1'>Line 8</td></tr>
                <tr row='9'><td class='column1'>Line 9</td></tr>
            </table>
        </div>
    </body>
</html>

因此，脚本添加了 column2 单元格，并且始终保持可见 - 相反，我们<span class="details">在其中显示/隐藏。我已经在 FF 3.6.3 中测试了这个版本，它的行为应该如此！

哦 - 我清理了你的 jQuery 选择器以获得更好的性能。如果您想了解更多有关原因的信息，请告诉我！

于 2010-05-20T15:50:21.460 回答
1

我在 Firefox 3.6.3 和 Chrome 5.0.375.29 上复制并尝试了您的代码。并没有看到你所描述的，所以我很茫然。

滚动条仅在正常滚动时移动，而不是在单击文本时移动。

于 2010-05-16T15:51:15.413 回答