Tengo un div emergente en la parte superior de mi página, se expande y se cierra al alternar.

También en alternar, estoy dando un top position diferente a un div diferente (un menú lateral emergente)

El problema es que el menú emergente lateral solo debería aparecer al hacer clic en el símbolo de la hamburguesa. Por alguna razón, al hacer clic en la parte superior, expandir div también está abriendo mi menú lateral.

¿Alguien puede ver por qué es esto? y ¿cuál es la forma más eficaz de detener esto?

CSS este es el css para mi menú emergente lateral

.sidenav {
    height: 100%;
    position: fixed;
    width: 0;
    z-index: 99;
    top: 96px;
    left: 0;
    background-color: #f0f1f3f2;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 50px;
}

.sidenavScrolloff {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 99;
    top: 10px;
    left: 0;
    background-color: #f0f1f3f2;
    overflow-x: hidden;
    padding-top: 50px;
}

.sidenavScroll {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    background-color: #f0f1f3f2;
    overflow-x: hidden;
    /*transition: 0.5s;*/
    padding-top: 50px;
}

HTML

HTML para mi menú principal que tiene una hamburguesa al hacer clic para mostrar mi menú lateral

<div class="col-md-6 col-sm-6 col-xs-6">
    <span class="col-3 float-left" id="hamburger-icon" onclick="openNav()">&#9776;</span>

    <img class="logo-img-big local-logo-img-big" src="cms-images/logo.png">
</div>

Div sobre el menú principal que tiene un div que se expande al hacer clic (también abre mi menú lateral, no debería)

<a href="#" class="toggle" onclick="dropDownMSG(); this.parentNode.classList.toggle('open');return false;">
    <img src="/Static/images/header-logo-top.png" alt="logo"/>
</a>

JavaScript

Script que controla mi menú emergente lateral y la función de desplazamiento para el menú lateral más una función para cambiar la posición superior del menú lateral al expandir el div superior

function openNav() {
    document.getElementById("mySidenav").style.width = "300px";
    document.getElementById("hamburger-icon").style.opacity = "0";
    document.getElementById("hamburger-icon").style.fontSize = "1";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("hamburger-icon").style.opacity = "1";
    document.getElementById("hamburger-icon").style.fontSize = "28";
}

function dropDownMSG() {
    const element = document.getElementById("mySidenav");

    if (element.className.indexOf('sidenavScrolloff') === -1) {
        element.className += 'sidenavScrolloff';
    } else {
        element.className = element.className.replace('sidenavScrolloff', '');
    }
}

window.onscroll = function () {onScrollNav()};

function onScrollNav() {
    if (document.getElementById("top-nav") > 40 || document.documentElement.scrollTop > 40) {
        document.getElementById("mySidenav").className = "sidenavScroll";
        console.log("you hit 40px !!");
    } else {
        document.getElementById("mySidenav").className = "sidenavScrollReset";
        console.log("you back to 0 !!");
    }
}

Problema

Al hacer clic en el menú de expansión, mi menú emergente lateral también aparece, esto no debería suceder.

1
Beep 16 oct. 2018 a las 15:29

2 respuestas

La mejor respuesta

Es debido al proceso de propagación del evento.

function openNav(event) {
         event && event.stopPropagation();
         ....
    }      

En html

<span class="col-3 float-left" id="hamburger-icon" onclick="openNav(event)">&#9776;</span>
1
Artur Gevorgyan 16 oct. 2018 a las 13:40

Aquí hay un ejemplo de alternancia de clases múltiples en javascript, espero que ayude:

function f() { 
 var element = document.getElementById("btn"); // get the element
 element.classList.toggle("red");  // toggle class red
 element.classList.toggle("blue"); // toggle class blue
}
.red { color:red; }
.blue { color:blue; }
<button id="btn" onclick="f()" class="red">color</button>
-1
Djamel Kr 16 oct. 2018 a las 13:20