jQuery slideDown然后在Firefox中单独Up

时间:2017-06-22 01:00:02

标签: javascript jquery firefox

我有这个代码在触摸时滑动移动菜单,但不知何故只在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;
});

1 个答案:

答案 0 :(得分:0)

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



3 * header->width * header->height

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




请注意,我删除了<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()