jQuery mobile (cliquez sur l'événement)

Je suis le développement de smartphone des applications hybrides.

J'essaie de cacher/montrer un <div> avec slideDown/slideUp.

Quand je clique sur le bouton, le menu <div> est censée cacher/montrer dépendent du contexte. Tout fonctionne bien sur mon ordinateur, mais ça ne marche pas à tous sur mon portable, rien ne se passe.

Voici mon code HTML

<a class="btnMenuDyn" data-role="button">Masquer le menu</a>

et voici mon jQuery mobile code:

$(document).bind('pageinit', function(e){


//définition des variables
var btnMenuDyn = $('a.btnMenuDyn'),
    menuDyn = $('div.menuDyn');

$(btnMenuDyn).bind('click', function(){


    //condition pour afficher ou non le menu
    if ($(menuDyn).hasClass("menuDynHide"))
    {
        $(menuDyn).slideDown().removeClass("menuDynHide");
    }
    else{
        $(menuDyn).slideUp().addClass("menuDynHide");
    }

});
});

OriginalL'auteur guillaume coulbaux | 2012-07-04

  1. 6

    ce problème est mobiles ne supportent pas sur qu'ils utilisent évènements touchstart et touchend peut donc suivre le mouvement si vous voulez encore de test sur les ordinateurs que vous pouvez faire ce

    $(btnMenuDyn).bind('touchstart mousedown', function(event){
    event.preventDefault();
    if ($(menuDyn).hasClass("menuDynHide"))
    {
        $(menuDyn).slideDown().removeClass("menuDynHide");
    }
    else{
        $(menuDyn).slideUp().addClass("menuDynHide");
    }

});

    une autre question avec la même réponse jquery évènements touchstart dans le navigateur

    plus d'informations peuvent être trouvées à l' http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html

    Oui, c'était évènements touchstart à ajouter, et de l'e.preventdefault pour obtenir le résultat parfait. Merci.
    Soyez prudent en utilisant évènements touchstart. Qui peut être déclenché involontairement lorsque l'utilisateur est en train d'essayer de glisser pour faire défiler. Je recommande au moins à l'aide touchend. Idéalement, vous devez mettre à jour l'INTERFACE utilisateur sur les évènements touchstart et d'agir uniquement sur touchend. J'ai créé un plugin qui fera de cette jquery-touchclick

    OriginalL'auteur Derry White

  2. 1

    Je conseille on() au lieu de bind()

    Et puisque vous avez fait ceci:

    var btnMenuDyn = $('a.btnMenuDyn')

    btnMenuDyn est un jquery élément du dom, afin de changer cela:

    if ($(menuDyn).hasClass("menuDynHide"))

    à ce

    if (menuDyn.hasClass("menuDynHide"))

    Et, de préférence, déclarer jquery éléments du dom comme ceci:

    var $btnMenuDyn = $('a.btnMenuDyn')
    Je ne serais pas d'accord avec déclarer des éléments du dom avec jquery $ prefix, notamment en raison de php, hérité de l'utilisation de $, alors que jquery a juste montré récemment.
    +1 pour l'utilisation sur place de bind (voir ici pourquoi api.jquery.com/bind) -1 pour nommer une variable $ prefix de Sorte que le résultat est neutre 🙂
    href="http://stackoverflow.com/questions/205853/why-would-a-javascript-variable-start-with-a-dollar-sign" title="pourquoi une variable javascript commencer par un signe dollar">stackoverflow.com/questions/205853/... Mais bien sûr, il descend les préférences personnelles. Si vous ne l'aimez pas, ne l'utilisez pas.
    Ouais, je pense que vous avez raison, c'est une affaire de style. Peut-être parce que je travaille plus avec le type-safe langues, je ne vois aucune bonne raison d'utiliser la notation hongroise. Je suppose que la deuxième moitié de mon commentaire était trop objectif, de sorte que les feuilles de l' +1 🙂
    C'est en fait le seul moment où je le trouve nécessaire d'indiquer le type de données en Javascript. Quand il s'agit de comparer des variables, je m'en tiens à === en JS, parce que c'est eqvivalent à == dans des langages fortement typés.

    OriginalL'auteur Johan