O menu está funcionando, mas no celular o evento é ativado diversas vezes, dando a impressão de que o menu está travado. Isso fica mais evidente mudamos a cor do botão toda vez que o evento e ativado: http://codepen.io/anon/pen/oXjwWe
Para resolver isso, você pode fazer como nessa pergunta, usando um timer para limitar o tempo em que o evento é ativado:
$(document).ready(function() {
var active1 = false;
var active2 = false;
var active3 = false;
var active4 = false;
var flag = false;
$('.parent2').on('touchstart click', function() {
if (!flag) {
flag = true;
setTimeout(function(){ flag = false; }, 100);
if (!active1) $(this).find('.test1').css({'background-color': 'gray', 'transform': 'translate(0px,125px)'});
else $(this).find('.test1').css({'background-color': 'dimGray', 'transform': 'none'});
if (!active2) $(this).find('.test2').css({'background-color': 'gray', 'transform': 'translate(60px,105px)'});
else $(this).find('.test2').css({'background-color': 'darkGray', 'transform': 'none'});
if (!active3) $(this).find('.test3').css({'background-color': 'gray', 'transform': 'translate(105px,60px)'});
else $(this).find('.test3').css({'background-color': 'silver', 'transform': 'none'});
if (!active4) $(this).find('.test4').css({'background-color': 'gray', 'transform': 'translate(125px,0px)'});
else $(this).find('.test4').css({'background-color': 'silver', 'transform': 'none'});
active1 = !active1;
active2 = !active2;
active3 = !active3;
active4 = !active4;
}
});
});
Note que mudei as condições de eventos do on
para touchstart click
. Eu testei em meu celular e a função click
também funcionou sem problemas.
Demo: http://codepen.io/anon/pen/jPbwwg
Eu recomendo você deixar o tempo do setTimeout
entre 500ms e 1000ms, assim dá tempo do menu começar a abrir e vê-lo funcionando, antes dele fechar repentinamente.