jQuery slideDown Firefoxでそれ自体をアップさせる

Question

私はこのコードをtouchDownするとモバイルメニューを表示しますが、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のバグだと思われます。そうであれば、それほどエレガントではありませんが、作業パッチを必要とします。 e.stopPropagation()とともに、jQueryのでこれを呼び出して自動的にfalseを返すので、私はe.preventDefault()を削除

// 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>

注意。