jQuery mobile（点击事件）

我正在开发智能手机混合应用程序。

我正在尝试使用slideDown / slideUp隐藏/显示

。

当我点击按钮时，菜单

应该隐藏/显示取决于上下文。 一切都在我的电脑上运行良好但它在我的手机上根本不起作用，没有任何反应。

这是我的HTML代码

 Masquer le menu 

在这里我的jQuery移动代码：

 $(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

这个问题是手机不支持点击他们使用touchstart和touchend所以可以跟踪运动如果你还想在计算机上测试你可以做到这一点

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

在浏览器中使用相同答案jquery touchstart的另一个问题

更多信息可以在http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html找到

Answer 2

我建议使用on()而不是bind()

因为你这样做：

 var btnMenuDyn = $('a.btnMenuDyn') 

btnMenuDyn是一个jquery dom元素，所以改变这个：

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

对此

 if (menuDyn.hasClass("menuDynHide")) 

最好像这样声明jquery dom元素：

 var $btnMenuDyn = $('a.btnMenuDyn')