jQuery可点击行答案

【问题标题】：jQuery clickable rowjQuery可点击行
【发布时间】：2011-05-02 18:14:56
【问题描述】：

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

  <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... 我做错了什么？

【问题讨论】：

标签： jquery html-table collapsable

【解决方案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 以外的容器中，您可能需要尝试将其保存在该容器中，但您明白了。根据页面高度的变化程度，这可能并不完美，但它可能会有所帮助。

【讨论】：

是的，就是这样。但即使它适合视口，也不意味着它应该向上滚动恕我直言。这与我不引人注目的工作方式相冲突......
@Wouter：我的意思是，如果它不适合（例如，有滚动条显示）并且你已经向下移动（所以 scrollTop > 0），当行收缩标准浏览器的行为是将所有内容都放在视口中（当然）。
@Wouter：我添加了一条关于scrollTop 的注释，这可能会有所帮助。
感谢 TJ 的帮助。我喜欢这个网站的人。 scrollTop 解决方案似乎正在工作，但是当文档（尝试）向上滚动然后再次向下滚动时，会出现短暂的闪烁。有没有办法防止向上滚动的短暂闪烁？
@Wouter：您可以在页面末尾附加一些内容，以确保它始终保持足够高以防止完全滚动（然后在完成后将其删除）。我已经在你可以这样做的地方添加了 cmets。

【解决方案2】：

好的，所以我尝试了 TJ 的建议来解决问题。

我将var scrollTop = document.body.scrollTop 更改为var scrollTop = 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>

【讨论】：