jQuery可点击的行

我有一张表，代表日历，可以展开和折叠表格行。jQuery可点击的行

<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，但子文件行按照应该的方式折叠，但文档在点击后立即滚动到顶部... 我在做什么错误？

来源

2010-10-30 Wouter Raemaekers

即使您没有在点击处理程序中返回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以外的容器中，您可能需要尝试将其保留在该容器中，但您明白了。这可能并不完美，具体取决于页面的高度有多大变化，但可能有所帮助。

来源

2010-10-30 09:18:59

是的，是这样。但即使它适合视口，并不意味着它应该向上滚动恕我直言。这与我的不显眼的工作方式相冲突... – 2010-10-30 09:23:29

@Wouter：我的意思是，如果它不适合（例如，有滚动条显示），并且你已经向下移动（所以scrollTop> 0），当行约定浏览器的标准行为是将所有内容放在视口中（当然）。 – 2010-10-30 09:27:02

@Wouter：我添加了关于'scrollTop'的注释，这可能有所帮助。 – 2010-10-30 09:30:57

好吧，所以我尝试了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>

来源

2010-10-31 08:46:17

jQuery可点击的行

回答

相关问题