Question

I’m developing smartphone hybrid applications.

I’m trying to hide/show a <div> with slideDown/slideUp.

When I click on the button, the menu <div> is supposed to hide/show depend of the context. Everything is working well on my computer but it just doesn’t work at all on my mobile, nothing happens.

Here is my HTML code

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

and here my 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");
    }

});
});

Answer 1

this problem is mobiles do not support click they use touchstart and touchend so can track movement if you still want to test on computers you can do this

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

});

another question with same answer jquery touchstart in browser

more infomation can be found at http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html