用于…的Javascript'；我不在野生动物园工作

目前，我正在尝试构建一个简单的侧导航，只要单击其中一个“toggleSidenav”按钮（有多个）就会显示/消失

在使用Firefox和Chrome进行测试时，它似乎工作得很好，但今天当我尝试使用Safari（桌面版和移动版）打开页面时，按钮没有任何作用

问题似乎是我使用的for循环，但是检查，Safari应该支持它

我的代码：

for (var btn of document.getElementsByClassName("toggleSidenav")) {
    btn.addEventListener("click", function() {
        var style = window.getComputedStyle(document.getElementById("sidenav"));

        if (style.getPropertyValue("display") == "none") {
            openSidenav();
        } else {
            closeSidenav();
        }
    });
}

---

无论如何，我可能需要使用另一种方法，因为for…of仅由IE/Edge 12+支持，但我仍然想知道为什么这不起作用。

Safari支持带有阵列的for of

getElementsByClassName

返回一个

NodeList

，它类似于数组，但不是真正的数组，因此需要将其转换为数组。由于您需要ECMAScript 6对的

支持，因此可以使用
Array.from（）
进行此转换，而不是使用一些旧的习惯用法，如
Array.prototype.slice.call（）


for（数组的var btn.from（document.getElementsByClassName（“toggleSidenav”））{
btn.addEventListener（“单击”，函数（）{
var style=window.getComputedStyle（document.getElementById（“sidenav”）；
if（style.getPropertyValue（“显示”）=“无”）{
openSidenav（）；
}否则{
closeSidenav（）；
}
});
}
函数openSidenav（）{
document.getElementById（“sidenav”）.style.display='block'；
}
函数closeSidenav（）{
document.getElementById（“sidenav”）.style.display='none'；
}

切换1
切换2
切换3
侧导航
您是否在web控制台中遇到错误？这非常有效。有没有什么地方我可以看到Safari只支持..和数组？我在上面链接的MDN参考页面似乎建议它也应该与其他iterable对象一起使用。问题似乎是
NodeList
是否是
iterable
。看见