简体   繁体   中英

Mobile menu doesn't close on iPhone

I'm told that the mobile menu on my page (accessible through the 3 horizontal bars icon top right) doesn't close on iPhone. I can't check myself because I don't have Apple devices (on online iPhone simulators it does work though) but I don't see why it would work on Android and not on iPhone.

Here's the JS code controlling the mobile menu:

$( '#mobile_menu_icon' ).click(function() {
    if( $( '.mobile_header_menu' ).css( 'right' ) == '-280px' ) { 
        $( '.mobile_header_menu' ).animate( { right: '0' }, open_delay, 'easeInOutExpo' );  
        $( '#wrap' ).animate({ right: '280px' }, open_delay, 'easeInOutExpo' );
        $( 'body' ).addClass( 'overflow_hidden' );
    }
    else { 
        $( '.mobile_header_menu' ).animate({ right: '-280px' }, close_delay, 'easeInOutExpo' );
        $( '#wrap' ).animate({ right: '0' }, close_delay, 'easeInOutExpo' );    
        $( 'body' ).removeClass( 'overflow_hidden' );
    }
    return false;
});
$( document, '.mobile_header_menu_close' ).click(function() {
    if( $( '.mobile_header_menu' ).css( 'right' ) == '0px' ) {
        $( '.mobile_header_menu' ).animate({ right: '-280px' }, close_delay, 'easeInOutExpo' );
        $( '#wrap' ).animate({ right: '0' }, close_delay, 'easeInOutExpo' );
        $( 'body' ).removeClass( 'overflow_hidden' );   
    }
});
$( '.mobile_header_menu_inner' ).click(function( event ) {
    event.stopPropagation();
});

I removed the following piece and it worked. Don't understand why it was problematical on iPhones.

$( '.mobile_header_menu_inner' ).click(function( event ) {
    event.stopPropagation();
});

It works just fine.

(Tested on iOS 9.1, 9.0 and 8.4 on the Xcode simulator and a iPhone 6 (iOS 9.1) and iPad Air (9.0)).

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM