javascript - 为什么我的菜单在移动设备上打开后立即关闭？

Question

我的菜单在移动设备上打开后立即关闭。在控制台中，我可以看到以下错误

jquery.js：3 [干预] 由于目标被视为被动，无法在被动事件侦听器中阻止默认值

有人可以帮我吗？谢谢！

HTML

<nav>
    <ul class="menu">
        <li class="current-menu-item">
            <a href="index.html">Home</a>
        </li>
        <li>
            <a href="gallery.html">Gallery</a>
        </li>
        <li>
            <a href="property-details.html">Property details</a>
        </li>
        <li>
            <a href="contact.html">Contact</a>
        </li>
    </ul>
</nav>

<div class="responsive-menu-button">
    <i class="fa fa-bars"></i>
</div>

jQuery

$( 'body' ).on( 'click touchstart', '.responsive-menu-button', function( event ) {
    event.preventDefault();

    var contentSize = parseInt( $( 'header.header-bar .header-bar-top .container' ).css( 'width' ), 10 );
    var responsiveMenuWidth = contentSize < 750 ? ( contentSize <= 370 ? 180 : 250 ) : 300;

    if( martanianLuxuryApartmentsResponsiveMenuVisible == false ) {
        var wrapper = $( '.big-wrapper' );
        var wrapperWidth = wrapper.width();
        var headerBar = $( this ).parents( 'header.header-bar' );

        headerBar.animate({ 'left': '-'+ responsiveMenuWidth +'px' }, 300 );
        wrapper.animate({ 'margin-left': '-'+ responsiveMenuWidth +'px', 'width': wrapperWidth }, 300 );

        $( '.responsive-menu-content' ).css({ 'display': 'block' }).animate({ 'right': '0' }, 300 );
        martanianLuxuryApartmentsResponsiveMenuVisible = true;
    }
    else {
        var wrapper = $( '.big-wrapper' );
        var wrapperWidth = wrapper.width();
        var headerBar = $( this ).parents( 'header.header-bar' );

        headerBar.animate({ 'left': '0' }, 300 );
        wrapper.animate({ 'margin-left': '0' }, 300 );

        $( '.responsive-menu-content' ).css({ 'display': 'block' }).animate({ 'right': '-'+ responsiveMenuWidth +'px' }, 300 );

        setTimeout( function() {

            $( '.responsive-menu-content' ).css({ 'display': 'none' });
            wrapper.css({ 'margin-left': '', 'width': '' });
            headerBar.css({ 'left': '' });

        }, 300 );
        martanianLuxuryApartmentsResponsiveMenuVisible = false;
    }
});

标签： javascriptcssmenu