0

テーブルの行を展開および折りたたむことができる、カレンダーを表すテーブルがあります。

  <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 を返したにもかかわらず、クリックの直後にドキュメントが一番上にスクロールします...何が間違っていますか?

4

2 に答える 2

0

クリック ハンドラーで 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-30T09:18:59.200 に答える
0

わかりましたので、問題を解決するために TJ の提案を試しました。

どういうわけか常に0を返すため、に変更var scrollTop = document.body.scrollTopしました（理由はわかりません）。これは正しいスクロール位置を返します。ちなみに、これはすべてFirefoxで行いました。var scrollTop = window.pageYOffsetdocument.body.scrollToppageYOffset

私はこのコードで終わった：

  <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-31T08:46:17.353 に答える