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;
 });
});