Question

我使用javascript创建一个带汉堡包图标的按钮。除了Windows 10 Home PC上的Microsoft Edge之外，它在每个浏览器和操作系统上都能正常工作。

这是我的代码（只是假设代码中早先没有命名任何未命名的变量或函数）：

function isMobile() {
    return window.outerWidth <= config.mobile.breakpointWidth
}

function toggleMobileClass() {
    isMobile() ? addClass(MBody, "mdcre-mobile") : removeClass(MBody, "mdcre-mobile")
}

function getMobileOpenIcon() {
    return '<i class="fa ' + config.mobile.navigation.button.icon.open + '"></i><span class="sr-only">Open Naviation</span>'
}

function getMobileCloseIcon() {
    return '<i class="fa ' + config.mobile.navigation.button.icon.close + '"></i><span class="sr-only">Close Navigation</span>'
}

function addMobileNavButton() {
    if (!document.getElementsByClassName("mdcre-nav-button")) {
        var e = document.createElement("button");
        e.classList += "mdcre-nav-button", e.innerHTML = getMobileOpenIcon(), e.addEventListener("click", function() {
            toggleMobileNavVisibility(), toggleMobileNavButtonIcon()
        }), MBody.appendChild(e)
    }
}

function removeMobileNavButton() {
    var e = document.getElementsByClassName("mdcre-nav-button")[0];
    e && e.remove()
}

function toggleMobileNavButton() {
    isMobile() ? addMobileNavButton() : removeMobileNavButton()
}

function toggleMobileNavVisibility() {
    document.getElementById("lightbox-menu").style.display = document.getElementById("lightbox-menu").style.display === 'block' ? 'none' : 'block';

      toggleClass(MHeader, 'show-nav');
      toggleClass(MBody, 'no-scroll');
}

function toggleMobileNavButtonIcon() {
    document.getElementsByClassName("mdcre-nav-button")[0].innerHTML = hasClass(MHeader, "show-nav") ? getMobileCloseIcon() : getMobileOpenIcon()
}

解释：当您低于特定大小（由变量breakpointWidth在其他地方决定）时，会创建一个button元素并为其分配类{{1} }。

在Microsoft Edge上，它会创建按钮元素，但不会添加该类。

我非常确定问题出在功能＆＃34; addMobileNavButton＆＃34; ，尽管我无法弄清楚是什么让Microsoft Edge变得困难。

其他信息：我最近更新了Windows 10家用电脑上的Microsoft Edge问题。 Chrome和Firefox在同一台PC上的代码工作正常。我在iPhone 5c上尝试过Microsoft Edge，它也运行良好。

Answer 1

+=不是将类添加到classList的正确方法。使用add()方法。

function addMobileNavButton() {
    if (!document.getElementsByClassName("mdcre-nav-button")) {
        var e = document.createElement("button");
        e.classList.add("mdcre-nav-button");
        e.innerHTML = getMobileOpenIcon();
        e.addEventListener("click", function() {
            toggleMobileNavVisibility(), toggleMobileNavButtonIcon()
        }), MBody.appendChild(e)
    }
}

您也可以使用addClass(e, "mdcre-nav-button")

Microsoft Edge javascript不会将类添加到按钮

1 个答案: