Question

我有这个代码在触摸时滑动移动菜单，但不知何故只在Firefox中，div总是立即自行备份。

$('#burger').on('click touchstart', function (e) {
    e.preventDefault();
    if (jQuery('#mobile-menu').is(":hidden")) {
        jQuery('body').css('position','relative');
        jQuery('.page').css({'overflow':'hidden','position':'fixed'});
        jQuery('#mobile-menu').slideDown('slow');
    } else {
        jQuery('#mobile-menu').slideUp('slow');
        jQuery('.page').css({'overflow':'visible','position':'static'});
        jQuery('body').css('position','static');
    }
    return false;
});

Answer 1

我怀疑这是一个Firefox错误;如果是这种情况，并且你需要一个不那么优雅但却有效的补丁，你可以尝试扼杀重复事件，如果它们在这之后发生得太快。

＆＃13;

3 * header->width * header->height

＆＃13;

// when true, ignore the event
var stifleEvent = false;

$('#burger').on('click touchstart', function (e) {
  if (stifleEvent) {
    return false;
  }

  if (jQuery('#mobile-menu').is(":hidden")) {
    $('body').css('position','relative');
    $('.page').css({'overflow':'hidden','position':'fixed'});
    $('#mobile-menu').slideDown('slow');
  } else {
    $('#mobile-menu').slideUp('slow');
    $('.page').css({'overflow':'visible','position':'static'});
    $('body').css('position','static');
  }
  
  // ignore more of this event for the next 10ms
  stifleEvent = true;
  setTimeout(() => { stifleEvent = false; }, 10);
  
  return false;
});

＆＃13;

请注意，我删除了<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="page"> <div id="mobile-menu"> Sliding Menu </div> <button id="burger" type="button"> | | | </button> </div>，因为返回false会自动在JQuery中调用此函数以及e.preventDefault()。

jQuery slideDown然后在Firefox中单独Up

1 个答案: