目前我正在尝试建立一个简单的侧航行,只要其中一个" toggleSidenav"单击按钮(有多个)。
在使用Firefox和Chrome进行测试时似乎工作正常但是今天当我尝试使用Safari(桌面版和移动版)打开我的页面时,按钮没有做任何事情。
问题似乎是我使用的循环,但检查reference of the 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 ...只能由IE / Edge 12+支持,但我仍然想知道为什么这样做不起作用。
答案 0 :(得分:5)
Safari支持for-of
数组。 getElementsByClassName
返回NodeList
,它类似于数组,但不是真正的数组,因此您需要将其转换为数组。由于您需要对for-of
支持ECMAScript 6,因此您可以使用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>