Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bobrinha

Remover classe ao clicar em qualquer lugar da tela

Recommended Posts

Olá, sei bem pouco de javascript então se alguém puder me ajudar, bom o script abaixo faz com que um menu apareça ao clicar no botão botaoMenu, no entanto o menu só desaparece e aparece se eu clicar no botaoMenu mais como fazer para o menu desaparecer ao clicar em qualquer lugar da tela?

    $('.botaoMenu').click(function () {
        if (!$(this).hasClass('menuAtivo')) {
            $(this).addClass('menuAtivo');
            $('nav ul').animate({'left': '0px'}, 300);
        } else {
            $(this).removeClass('menuAtivo');
            $('nav ul').animate({'left': '-100%'}, 300);
        }
    });

Obrigado desde de já

Compartilhar este post


Link para o post
Compartilhar em outros sites

escute o click no body:

$('body').on('click', function() {..
e lembre-se de não propagar o evento do botão:

$('.botaoMenu').click(function (event) {
    event.stopPropagation();

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá, obrigado, bom eu não sei praticamente nada de javascript, ai vem a dificuldade, apesar de parecer simples pra mim é complicado deixei o código como o abaixo e não funciona :(

$(function () {
    $('.botaoMenu').click(function () {
        if (!$(this).hasClass('menuAtivo')) {
            $(this).addClass('menuAtivo');
            $('nav ul').animate({'left': '0px'}, 300);
        } else {
            $(this).removeClass('menuAtivo');
            $('nav ul').animate({'left': '-100%'}, 300);
        }
    });

    $('body').on('click', function () {
        $('.botaoMenu').click(function (event) {
            event.stopPropagation();
        });
    });

});




Compartilhar este post


Link para o post
Compartilhar em outros sites

não não.. :lol: veja:

$(function () {
    $('.botaoMenu').click(function (event) {
        event.stopPropagation();
        if (!$(this).hasClass('menuAtivo')) {
            $(this).addClass('menuAtivo');
            $('nav ul').animate({'left': '0px'}, 300);
        } else {
            $(this).removeClass('menuAtivo');
            $('nav ul').animate({'left': '-100%'}, 300);
        }
    });

    $('body').on('click', function () {
            $('.botaoMenu').removeClass('menuAtivo');
            $('nav ul').animate({'left': '-100%'}, 300);
    });
});

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu fiz agora eu clico o menu aparece e ja some sem eu fazer nada, tipo eu clico no botao o menu vem e vai

Eu penso que teria que ser algo mais ou menos como abaixo se a classe existir então remove, mas não esta funcionando

    $('body').on('click', function () {
        if ($(this).hasClass('menuAtivo')) {
            $(this).removeClass('menuAtivo');
            $('nav ul').animate({'left': '-100%'}, 300);
        }
    });

Compartilhar este post


Link para o post
Compartilhar em outros sites

você deixou o código exatamente como coloquei acima?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Alguma falta de atenção que não sei explicar, acho que copei partes e tentei misturar e não deu certo mais agora que você falou copiei e colei e deu certo, desculpe a falta de atenção e muito obrigado pela ajuda

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.