jQuery Girl
  1. jQuery Girl
  3. Le bouton Hamburgler.js ne fonctionne pas sur les appareils mobiles
Intereting Posts
Intégration du formulaire Google Maps Place dans le formulaire d’auto-complétion javascript jQuery / JavaScript Comment trouver le bord intérieur gauche d’un élément Est-il possible d’avoir des champs supplémentaires sous la forme jqgrid? Facebook – Message d’erreur: redirect_uri n’est pas la propriété de l’application Sélectionnez la bonne valeur pour select lors de l’utilisation de select2 avec jqGrid Echec du chargement de la ressource: Uncaught TypeError: $ (…) .select2 n’est pas une fonction Sélecteurs JQuery: comment sélectionner un élément avec une classe * et * id spécifiques Différence de rendu des points Unicode dans un navigateur: caractères HTML vs jQuery.html Comment faire pivoter une image d’une quantité aléatoire à l’aide de CSS? JQuery Mobile Parse JSON pour ListView Obtenir la valeur actuelle de datalist onhover mon violon jQuery ne fonctionne pas Ajouter une case à cocher dynamicment jQuery: Lors de la création d’un nouvel élément, ai-je besoin de la balise de fin? Délai après avoir cliqué sur le bouton de téléchargement de fichier?

Le bouton Hamburgler.js ne fonctionne pas sur les appareils mobiles

J’ai implémenté hamburger.js . Lorsque j’essaie d’afficher le menu de mon site Web sur un appareil mobile, le bouton de fermeture ne fonctionne pas.

Voici mon site: http://johnm.io/project/hamburgler/

Exemple : 

 function togglescroll() { $('body').on('touchstart', function(e) { if ($('body').hasClass('noscroll')) { e.preventDefault(); } }); } $(document).ready(function() { togglescroll() $(".icon").click(function() { $(".mobilenav").fadeToggle(500); $(".top-menu").toggleClass("top-animate"); $("body").toggleClass("noscroll"); $(".mid-menu").toggleClass("mid-animate"); $(".bottom-menu").toggleClass("bottom-animate"); }); }); // PUSH ESC KEY TO EXIT $(document).keydown(function(e) { if (e.keyCode == 27) { $(".mobilenav").fadeOut(500); $(".top-menu").removeClass("top-animate"); $("body").removeClass("noscroll"); $(".mid-menu").removeClass("mid-animate"); $(".bottom-menu").removeClass("bottom-animate"); } }); 
 * { font-family: 'helvetica nue', sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; /* For some Androids */ } .top-animate { background: #fff !important; top: 13px !important; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .mid-animate { opacity: 0; } .bottom-animate { background: #fff !important; top: 13px !important; -webkit-transform: rotate(-225deg); transform: rotate(-225deg); } .top-menu { top: 5px; width: 25px; height: 2px; border-radius: 10px; background-color: #F9A530; } .mid-menu { top: 13px; width: 25px; height: 2px; border-radius: 10px; background-color: #F9A530; } .bottom-menu { top: 21px; width: 25px; height: 2px; border-radius: 10px; background-color: #F9A530; } .menui { background: orange; transition: 0.6s ease; transition-timing-function: cubic-bezier(.75, 0, .29, 1.01); margin-top: 10px; position: absolute; } .icon { z-index: 999; position: fixed; display: block; padding: 9px; height: 32px; width: 32px; margin: 0px; top: 0; left: 0; } .mobilenav { font-family: inherit; top: 0; left: 0; z-index: 999; display: none; position: fixed; width: 100%; height: 100%; background: orange; } .mobilenav li { list-style-type: none; text-align: center; padding: 10px; } .mobilenav li a { font-size: 150%; color: #fff; text-decoration: none; font-weight: 300; width: 100%; } .mobilenav li:first-child { margin-top: 60px; } 
 
 
  • Never 
    •  
  • Gonna 
    •  
  • Give 
    •  
  • You 
    •  
  • Up 
    •

    Le problème était que le body écoutait l’événement touchstart et s’il “avait” la classe noscroll – ce qui se produit lorsque le menu est ouvert – il le fait .. eh bien … rien, au lieu de faire l’activation.

    La chose à faire est donc de vérifier si l’événement touchstart déclenché par le bouton ou non. Si c’est le cas, nous faisons la bascule. 

     // HAMBURGLERv2 function togglescroll() { $('body').on('touchstart', function(e) { // Just add the check: !$(e.target).hasClass('icon') if (!$(e.target).hasClass('icon') && $('body').hasClass('noscroll')) { e.preventDefault(); } }); } $(document).ready(function() { togglescroll() $(".icon").click(function() { $(".mobilenav").fadeToggle(500); $(".top-menu").toggleClass("top-animate"); $("body").toggleClass("noscroll"); $(".mid-menu").toggleClass("mid-animate"); $(".bottom-menu").toggleClass("bottom-animate"); }); }); // PUSH ESC KEY TO EXIT $(document).keydown(function(e) { if (e.keyCode == 27) { $(".mobilenav").fadeOut(500); $(".top-menu").removeClass("top-animate"); $("body").removeClass("noscroll"); $(".mid-menu").removeClass("mid-animate"); $(".bottom-menu").removeClass("bottom-animate"); } }); 
     * { font-family: 'helvetica nue', sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; /* For some Androids */ } .top-animate { background: #fff !important; top: 13px !important; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .mid-animate { opacity: 0; } .bottom-animate { background: #fff !important; top: 13px !important; -webkit-transform: rotate(-225deg); transform: rotate(-225deg); } .top-menu { top: 5px; width: 25px; height: 2px; border-radius: 10px; background-color: #F9A530; } .mid-menu { top: 13px; width: 25px; height: 2px; border-radius: 10px; background-color: #F9A530; } .bottom-menu { top: 21px; width: 25px; height: 2px; border-radius: 10px; background-color: #F9A530; } .menui { background: orange; transition: 0.6s ease; transition-timing-function: cubic-bezier(.75, 0, .29, 1.01); margin-top: 10px; position: absolute; } .icon { z-index: 999; position: fixed; display: block; padding: 9px; height: 32px; width: 32px; margin: 0px; top: 0; left: 0; } .mobilenav { font-family: inherit; top: 0; left: 0; z-index: 999; display: none; position: fixed; width: 100%; height: 100%; background: orange; } .mobilenav li { list-style-type: none; text-align: center; padding: 10px; } .mobilenav li a { font-size: 150%; color: #fff; text-decoration: none; font-weight: 300; width: 100%; } .mobilenav li:first-child { margin-top: 60px; } 
      
     
  • Never
    •  
  • Gonna
    •  
  • Give
    •  
  • You
    •  
  • Up
    •