jQuery 可点击行

Question

我有一个表，代表一个日历，可以展开和折叠表行。

  <tr class="parent" id="month1">
    <th class="subheader">Januari</th>
    <th></th><th></th>
  </tr>
  <tr class="row child-month1" id="day-1">
    <td class="date"> 1 januari 2010</td>
    <td>Bedrag </td>
    <td>-817.0 </td>
  </tr>
  <tr class="row child-month1" id="day-2">
    <td class="date"> 2 januari 2010</td>
    <td>Bedrag </td>
    <td> 0 </td>
  </tr>

使用 jQuery，我使其可单击：

<script type="text/javascript">
$(document).ready(function() {    
  $('tr.parent').click(function(){
    $(this).siblings('.child-' + this.id).toggle();
    return false;
  });
});
</script>

现在的问题是，单击表行后窗口始终滚动到顶部。我希望它保持在单击之前的滚动位置。

子行按预期折叠，但文档在单击后立即滚动到顶部，即使我在 .click 末尾返回 false... 我做错了什么？

Answer 1

即使您没有在点击处理程序中返回 false，页面也不应该滚动以响应点击。

页面是否足够短，当某些行折叠时，页面会变得足够短以使其全部适合视口？ （因此浏览器自然会向上滚动以填充视口。）

更新如果是这种情况，您可能会考虑在调用期间尝试保留scrollTop：

$(document).ready(function() {    
  $('tr.parent').click(function(){
    var scrollTop = document.body.scrollTop;        // <== Save the current value
    // *** Maybe append something to the page here to keep it tall***
    $(this).siblings('.child-' + this.id).toggle();
    // *** Maybe remove the appended thing now ***
    document.body.scrollTop = scrollTop;            // <== Restore it
    return false;
  });
});

如果所有这些位于 body 以外的容器中，您可能需要尝试将其保留在该容器中，但您明白了。这可能并不完美，具体取决于页面高度的变化程度，但它可能会有所帮助。

Answer 2

好吧，我尝试了 TJ 的建议来解决这个问题。

我将 varscrollTop = document.body.scrollTop 更改为 varscrollTop = window.pageYOffset 因为不知何故 document.body.scrollTop 总是返回 0（不不知道为什么）。 pageYOffset 为我返回正确的滚动位置。顺便说一句，这一切都是我在 Firefox 中完成的。

我最终得到了这段代码：

  <div id="bottomspacer" style="height: 1000px; display: none; "></div>
  <script type="text/javascript">
  $('tr.parent').click(function(){
    $('#bottomspacer').show();
    var scrollTop = window.pageYOffset;
    $(this).siblings('.child-' + this.id).toggle();
    document.body.scrollTop = scrollTop;
    $('#bottomspacer').hide();
    return false;
  });
  </script>