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

展开/折叠将页面置于顶部

3 个答案: