Question

我使用以下代码来模拟.animate切换效果。但是，单击页面时会跳到顶部。我尝试过使用预防措施，但它仍然跳跃，所以我想我错过了什么......有什么想法吗？

$(function() {
$('.menu-toggle').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {// odd clicks 

    $(this).find('i').toggleClass('fa-bars fa-times');
    $(this).toggleClass('cross');
    $('.menu-over ul li').toggleClass('animated-fast slideInLeft')

    $(".menu-over").animate({
    left: "-50%",
    }, 1000 );

    $( ".mainsite" ).animate({
    left: "0%",
    width:"100%" ,
    }, 1000 );

  } else {// even clicks

    $(this).find('i').toggleClass('fa-bars fa-times');
    $(this).toggleClass('cross');
    $('.menu-over ul li').toggleClass('animated-fast slideInLeft')

    $(".menu-over").animate({
    left: "0%",
    }, 1000 );

    $( ".mainsite" ).animate({
    left: "50%",
    width:"50%" ,
    }, 1000 );

  }
  $(this).data("clicks", !clicks);
});
});

Answer 1

在功能结束时尝试return false。问候

Answer 2

您的点击事件中应该有.preventDefault()：

  $('.menu-toggle').click(function(event) {
         event.preventDefault();

或者你可以使用return false;，它应该在你的情况下以相同的方式工作：

  $('.menu-toggle').click(function(event) {
         return false;

Answer 3

想出来。感谢所有的建议，但奇怪的是他们都没有工作。这是导致它的.mainsite宽度动画。将其更改为填充效果，现在点击时全部保持不变。

阻止.click功能跳转到页面顶部

3 个答案: