Le bug de jquery sur iPhone

Question

Le code suivant affiche un menu appelé #wrap-footer en le faisant glisser vers le bas lorsque vous cliquez sur #menu-button. En cliquant n'importe où sur la page, sauf le menu fait glisser vers le haut.

Lorsque le menu est #menu-button visible a une classe supplémentaire à elle appelé « ouvert menu » (utilisé pour le style). Lorsque le menu est caché à nouveau la classe est supprimée.

Note, j'ai utilisé le #wrap-header sélecteurs, #wrap-pre-footer, #wrap-content plutôt que html ou document que l'iPhone ne reconnaît pas ces derniers.

$(document).ready(function(){
    $("#menu-button a").hide();
    $('#menu-button').append('Menu');

    $('#wrap-header,#wrap-pre-footer,#wrap-content').click(function() {
        $('#wrap-footer').slideUp('slow');
        $('#menu-button').removeClass('menu-open');
    });

    $('#menu-button').click(function(event){
       event.stopPropagation();
       $('#menu-button').toggleClass('menu-open');
       $('#wrap-footer').slideToggle('slow');
    });

    $("#wrap-footer").click(function(e) {
       e.stopPropagation();
    }); 
});

Sur les navigateurs de bureau tout va bien. Cependant sur l'iPhone le slideToggle fonctionne très bien, mais le toggleClass supprime jamais la classe. Donc, si le menu est ouvert, en cliquant sur la page (mais pas #menu-button ou #wrap-footer) réduit le menu et supprime la classe, mais en cliquant sur #menu-button seul le menu réduit et ne supprime pas la classe.

Merci

Answer 1

Il se trouve que les js était très bien. Le vrai problème est la classe de vol stationnaire css. Sur un iPhone le dernier élément que vous cliquez sur un état persiste comme en vol stationnaire. Retrait de la classe de vol stationnaire css (pas nécessaire pour ma version mobile du site) fixe cela.