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可點擊的行

回答

相關問題