1

tenho o seguinte código

//Menu Mobile

var closeTab = document.getElementById("close-i");

document.querySelector(".user-list").onclick = function() {
    document.documentElement.classList.add("menu-ativo")
};
document.documentElement.onclick = function(event){
    if (event.target === document.documentElement) {
        document.documentElement.classList.remove("menu-ativo");
    }
}
closeTab.onclick = function(event){
    document.documentElement.classList.remove("menu-ativo");
}

//Menu Desktop


var menuDesk = document.getElementById("menu-desktop");
var optDesk = document.getElementById("opt-desktop");
var deskIcon = document.getElementById("menu-desk-icon");


menuDesk.onclick = function(event){
    if (optDesk.style.display == "none") {
        deskIcon.classList.remove("fa-chevron-right");
        deskIcon.classList.add("fa-chevron-down");
        optDesk.style.display = "inline-block";
    }
    else{
        deskIcon.classList.remove("fa-chevron-down");
        deskIcon.classList.add("fa-chevron-right");
        optDesk.style.display = "none";
    }
};

*Porém não funcionou

HTML

<div class="header-mobile on-top" id="mobile-header">
            <div class="user-holder">
                <p class="user-list"><!-- Ícone para abrir o menu --></p>
                <nav class="user-opt">
                    <p id="close-i">
                        <i class="fa fa-times fa-2x" aria-hidden="true"></i>
                    </p>
                    <!-- Imagem mostrada dentro do menu e nome de usuário -->
                    <figure class="imagem-atual">
                        <img src="img/perfil.jpg" alt="imagem-usuário">
                        <figcaption>Murilo Gambôa</figcaption>
                    </figure>
                    <!-- Barra de Opções -->
                    <ul>
                        <a href="meu-perfil.html"><li class="item-1"><i class="fa fa-cog i-menu" aria-hidden="true"></i><span>Editar perfil</span></li></a>
                        <a href="ultimos-adicionados.html"><li class="item-2"><i class="fa fa-video-camera i-menu" aria-hidden="true"></i><span>Últimos vídeos</span></li></a>
                        <a href="http://webmail.impd.org.br/webmail" target="_blank"><li class="item-3"><i class="fa i-church i-menu"></i><span>Eclesiástico</span></li></a>
                        <a href="ajuda.html"><li class="item-4"><i class="fa fa-question i-menu" aria-hidden="true"></i><span>Ajuda</span></li></a>
                        <a href="index.html"><li class="item-5"><i class="fa fa-sign-out i-menu" aria-hidden="true"></i><span>Sair</span></li></a>  
                    </ul>
                </nav>
                <!-- Ícones sociais -->
                <ul class="social" id="social-icons">
                    <li class="is is-1"><a href="" class="is" target="_blank">Facebook</a></li>
                    <li class="is is-2"><a href="" class="is" target="_blank">Twitter</a></li>
                    <li class="is is-3"><a href="" class="is" target="_blank">Instagram</a></li>
                    <li class="is is-4"><a href="" class="is" target="_blank">YouTube</a></li>
                </ul>
            </div>
        </div>
        <div class="header-desk on-top" id="desktop-header">
            <div class="user-holder">
                <!-- Ícones sociais -->
                <ul class="social">
                    <li class="is is-1"><a href="" class="is" target="_blank">Facebook</a></li>
                    <li class="is is-2"><a href="" class="is" target="_blank">Twitter</a></li>
                    <li class="is is-3"><a href="" class="is" target="_blank">Instagram</a></li>
                    <li class="is is-4"><a href="" class="is" target="_blank">YouTube</a></li>
                </ul>
                <!-- Menu do Usuário -->
                <nav class="user-opt-desk" id="menu-desktop">
                    <figure>
                        <img src="img/perfil.jpg">
                        <figcaption >Nome de Usuário da Silva</figcaption>
                    </figure>
                    <i class="fa fa-chevron-right" aria-hidden="true" id="menu-desk-icon"></i>
                    <!-- Barra de Opções -->
                    <ul id="opt-desktop">
                        <a href="meu-perfil.html"><li class="item-1"><i class="fa fa-cog i-menu" aria-hidden="true"></i><span>Editar perfil</span></li></a>
                        <a href="ultimos-adicionados.html"><li class="item-2"><i class="fa fa-video-camera i-menu" aria-hidden="true"></i><span>Últimos vídeos</span></li></a>
                        <a href="http://webmail.impd.org.br/webmail" target="_blank"><li class="item-3"><i class="fa i-church i-menu"></i><span>Eclesiástico</span></li></a>
                        <a href="ajuda.html"><li class="item-4"><i class="fa fa-question i-menu" aria-hidden="true"></i><span>Ajuda</span></li></a>
                        <a href="index.html"><li class="item-5"><i class="fa fa-sign-out i-menu" aria-hidden="true"></i><span>Sair</span></li></a>  
                    </ul>
                </nav>
            </div>
        </div>

1 Resposta 1

2

Bom, para capturar o click fora do do menu você já descobriu. Logo, só resta ignorar o click dentro do menu. Você pode adotar a seguinte abordagem.

document.documentElement.onclick = function(event){

    if (event.target !== optDesk) {
        optDesk.style.display = 'none';
    }
}

Ao invés de comparar o target com o documento todo tu podes ignorar ele quando o click ocorrer dentro do optDesk. Além disso, sugiro que declare os eventos com a diretiva element.addEventListener('click', function (e) {}); ao invés de element.onclick. Também, sugiro que utilize uma biblioteca para manipulação de DOM como jQuery por exemplo, é muito mais claro, fácil e otimizado o modo de manipular DOM.

6
  • Ele não está funcionando aqui, quando clico fora, continua mostrando a lista, e eu queria primeiro fazer funcionar em javascript normal, para depois passar ao jquery, ja fiz no jquery e funcionou, só que eu queria mesmo pelo javascript Commented 11/10/2016 às 17:29
  • 1
    Bom, eu não tenho uma visão clara de como o seu HTML está disposto na tela, mas eu acredito que você clicar em qualquer lugar que não seja o optDesk ele vai fechar/desabilitar o display do optDesk. A menos que o optDesk esteja cobrindo a tela toda.
    – lenilsondc
    Commented 11/10/2016 às 17:32
  • em relação a uma tela de 1024x800, o optDesk ocupa 280x560 Commented 11/10/2016 às 17:44
  • Eu consegui simular normalmente nesse fiddle: jsfiddle.net/d18bmaeb de um olhada por gentileza.
    – lenilsondc
    Commented 11/10/2016 às 17:48
  • 1
    A! Descobri o que estava errado. Eu copiei o código anterior optDesk.style.display("none"); porém não verifiquei que estava errado a forma de atribuir o valor do display no elemento. Enfim, o certo é atribuir assim: optDesk.style.display = 'none';.
    – lenilsondc
    Commented 11/10/2016 às 17:49

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 .