Question

我对JS完全陌生。我有一个打开菜单按钮，可切换sidenav标头。这很好。此外，如果要打开sidenav（显示：阻止），我想将汉堡图标更改为X；如果要关闭sidenav，则再次将汉堡图标更改为（显示：无）

我尝试了一个if / else语句，该语句检查sidenav的css显示状态，但这不起作用。

"use strict";

window.addEventListener("load", function() {

    let openMenu = document.getElementById("open-menu");

    openMenu.addEventListener("click", function () {

        let header = document.getElementById("sidenav");
        header.classList.toggle("toggle");
        openMenu.classList.toggle("z-index-9999");

    }, false);

    if (document.getElementById("sidenav").style.display == "none") {
        openMenu.innerHTML = "&#9776; Menü";
    } else {
        openMenu.innerHTML = "&times; Menü";
    }

}, false);

<button id="open-menu" type="button">&#9776; Menu</button>
<header id="sidenav">
    <nav>
        <ul>
            ...
        </ul>
    </nav>
</header>

Answer 1

当前，仅在加载页面时检查一次元素的状态。尝试像下面这样在click事件处理函数中移动条件：

 openMenu.addEventListener("click", function () {

    let header = document.getElementById("sidenav");
    header.classList.toggle("toggle");
    openMenu.classList.toggle("z-index-9999");

    openMenu.innerHTML = document.getElementById("sidenav")
        .style.display == "none" 
            ? "&#9776; Menü";
            : "&times; Menü";
}, false);

Answer 2

我在这段代码中得到了您想要做的事情。有用的一件事是元素上的getComputedStyle函数，它告诉您CSS最终设置为它的最终样式。但是，它不能单独工作，因为您的代码仅在页面加载时运行。

我将专注于扩展和缩回侧栏的代码。可能有一种方法可以更改它，以使其打开或关闭一个类，然后由于您的CSS规则（包括更改元素的内容），该类将具有多种效果

#open-menu.menuOpen ~ #sidenav {
  /*When an element with ID open-menu has the menuOpen class, check for neighboring elements with id sidenav, and set their display property to block.*/
  display: block;
}

#open-menu.menuOpen:before {
  /* Display the &times character before the open-menu element, WHEN it has the menuOpen class */
  content: '&times;'
}

#open-menu:not(.menuOpen):before {
  /* Display the &#9776; character before the open-menu element, when it DOES NOT have the menuOpen class */
  content: '&#9776;'
}

然后切换：

// js
document.getElementById('open-menu').classlist.toggle('menuOpen');

这样，将打开菜单按钮元素更改为具有menuOpen类或不具有menuOpen类将以有状态的方式应用您想要的所有更改。

JS：根据元素的CSS显示状态更改innerHTML

2 个答案: