Javascript for ... of在Safari中不起作用

Question

目前我正在尝试建立一个简单的侧导航,只要点击其中一个"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 ...只能由IE/Edge 12+支持,但我仍然想知道为什么这不起作用.

Answer 1

Safari支持for-of数组.getElementsByClassName返回a NodeList,类似于数组,但不是真正的数组,因此需要将其转换为数组.由于您需要ECMAScript 6支持for-of,您可以使用Array.from()此转换,而不是像一些旧的习语Array.prototype.slice.call().

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

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

function openSidenav() {
  document.getElementById("sidenav").style.display = 'block';
}

function closeSidenav() {
  document.getElementById("sidenav").style.display = 'none';
}

<button class="toggleSidenav">
  Toggle 1
</button>
<button class="toggleSidenav">
  Toggle 2
</button>
<button class="toggleSidenav">
  Toggle 3
</button>
<div id="sidenav">
  Side Nav
</div>