4

目前，我正在尝试构建一个简单的侧导航，只要单击“toggleSidenav”按钮之一（有多个），它就会出现/消失。

在使用 Firefox 和 Chrome 进行测试时，它似乎工作正常，但今天当我尝试使用 Safari（桌面和移动版本）打开我的页面时，按钮没有做任何事情。

问题似乎是我使用的 for-of-loop 但检查for...of 的引用，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+ 支持，但我仍然想知道为什么这不起作用。

4

1 回答 1

5

Safari 支持for-of数组。getElementsByClassName返回 a NodeList，它类似于数组，但不是真正的数组，因此您需要将其转换为数组。由于您需要 ECMAScript for-of6Array.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>

于 2016-12-29T23:38:07.863 回答