2

Peguei esse código pronto para montar um menu falso off-canvas, ele está funcionando perfeitamente, mas quando vou acessar pelo celular o menu não aparece, o que eu preciso fazer?

$(".toggle-canvas").click(function () {
$("#menu-canvas").toggleClass('menu-canvas-active');
    removeClass = false;
});

$("#menu-canvas").click(function() {
    removeClass = false;
});
$("html").click(function () {
    if (removeClass) {
        $("#menu-canvas").removeClass('menu-canvas-active');
    }
    removeClass = true;
})

Outra pergunta, o addClass funciona em celular?

5
  • Tem certeza que a parte que dá problema é a parte de código que colocou? Acho muito mais provável ser algo de CSS que o navegador mobile não suporte e acabe não renderizando o menu. Pode fazer um exemplo mínimo que reproduza o problema? (completo, com html, css e js) Commented 20/12/2014 às 20:03
  • Já experimentaste com $(document) em vez de $("html")?
    – Sergio
    Commented 20/12/2014 às 20:12
  • Em resposta ao addClass, qualquer método de jQuery funciona em qualquer dispositivo, incluindo smartPhones.
    – Zuul
    Commented 20/12/2014 às 22:29
  • 1
    Será que não deveria adicionar de touchend junto ao click?
    – Wakim
    Commented 20/12/2014 às 22:44
  • Poderia informar se a minha resposta ajudou? Ou se não, qual o problema que houve?
    – Syzoth
    Commented 27/11/2015 às 0:42

1 Resposta 1

1

Primeiramente, sua variável removeClass não está definida, isto pode acabar misturando com variaveis de um level superior ou globais, portanto sempre use var ...

Ou coisa, evite criar os eventos no "primeiro level" do javascript (seria o level global), algo como:

<script>
var oi = 1;
</script>

Prefira algo como:

<script>
(function () {
    var oi = 1;
}());
</script>

Assim você pode evitar misturar as variáveis

Dando seguimento com isto algo que você poderia fazer seria usar o evento .on do Jquery ao invés de .click (equivalente ao .bind("click",)

Os eventos .on verificam modificações no DOM, se for adicionado um objeto novo ele automaticamente aplica o evento. Digo isto pois, pois acredito que o você esteja tentando adicionar o evento .click, quando o objeto ainda não foi renderizado.

Um exemplo de .on seria:

$(document).on("click", "SELETOR", function () { console.log("Test..."); });

No seu caso, o seu script poderia trabalhar assim:

(function () { //"Isola" as variáveis 
    var removeClass = false;//Define a variável

    //Configura o click para o elemento .toggle-canvas, assim que este "existir"
    $(document).on("click", ".toggle-canvas", function () {
        $("#menu-canvas").toggleClass('menu-canvas-active');
        removeClass = false;
    });

    //Configura o click para o elemento #menu-canvas, assim que este "existir"
    $(document).on("click", "#menu-canvas", function() {
        removeClass = false;
    });

    //Não é necessário .on aqui, pois o document é um dos primeiros elementos "dentro do javascript" a existirem
    $(document).click(function () {
        if (removeClass) {
            $("#menu-canvas").removeClass("menu-canvas-active");
        }

        removeClass = true;
    });
}());

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .