Question

我在页面顶部有一个弹出的div，它会在切换时展开和关闭。

也在切换时，我给不同的div提供了不同的top position（弹出菜单）

问题是侧面弹出菜单仅应在单击汉堡符号时弹出。出于某种原因，在顶部点击div也会打开我的侧边菜单。

有人可以看到为什么吗？阻止这种情况的最有效方法是什么？

CSS 这是我的侧面弹出菜单的

.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单击时显示一个汉堡包，以显示我的侧边菜单

<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，单击时具有div扩展（它也会打开我的侧菜单，应该不会）

<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

控制我的侧面弹出菜单的脚本以及侧面菜单的滚动功能，以及在顶部div展开时更改侧面菜单的顶部位置的功能

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 !!");
    }
}

问题

单击扩展菜单时，我的侧面弹出菜单也会弹出，这不应该发生。

Answer 1

这是由于事件冒泡过程造成的。

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

以html

<span class="col-3 float-left" id="hamburger-icon" onclick="openNav(event)">&#9776;</span>

Answer 2

以下是在javascript中切换多个类的示例，希望对您有所帮助：

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>

展开切换会返回意外结果JavaScript

2 个答案: