javascript - 展開/折りたたむとページが一番上に表示されます

Question

ページを下にスクロールするたびに要素が展開または折りたたまれると、ページが突然リセットされ、フォーカスがページの上部に移動します。

ページが移動するのを防ぐ方法、またはこれをあまり突然にしない方法はありますか?

    $(document).ready(function () {
        $(".flip").click(function () {
        var panel = $(this).next('.panel');
        $('.panel').not(panel).slideUp('slow');
        $(this).next('.panel').slideToggle("slow");
       });
    });

http://jsfiddle.net/chaddly/5FNTX/

Answer 1

この追加を試す"e.preventDefault();"

$(document).ready(function () {
    $(".flip").click(function (e) {
        e.preventDefault();
        var panel = $(this).next('.panel');
        $('.panel').not(panel).slideUp('slow');
        $(this).next('.panel').slideToggle("slow");
    });
});

Answer 2

クリックしている要素には # のリンクが含まれているため、ページの上部に移動する原因となっているリンクに移動しています。

への呼び出しを追加すると、preventDefault()これが停止します。

$(".flip").click(function (e) {
     e.preventDefault();
     var panel = $(this).next('.panel');
     $('.panel').not(panel).slideUp('slow');
     $(this).next('.panel').slideToggle("slow");
});

http://jsfiddle.net/5FNTX/1/

Answer 3

return false最後のトグルの後に置くことができます。

$(document).ready(function () {
 $(".flip").click(function () {
  var panel = $(this).next('.panel');
  $('.panel').not(panel).slideUp('slow');
  $(this).next('.panel').slideToggle("slow");
  return false;
 });
});