使用带有导航标签的 getElementsByTagName [关闭]答案

【问题标题】：using getElementsByTagName with nav tag [closed]使用带有导航标签的 getElementsByTagName [关闭]
【发布时间】：2019-02-05 19:46:04
【问题描述】：

我正在尝试使用此代码同时折叠所有导航栏，但它似乎没有做任何事情：

var toggleOffAll = function() {
	var x = document.getElementsByTagName('nav');
	var j;
	for (j = 0; j < j.length; j++){
		
	x[j].style.display='none';
	};
  };

【问题讨论】：

您的 for 循环没有执行，因为 j.length 未定义。
我建议始终调试您的 javascript，一个简单的调试运行应该指出 j.length 没有返回任何值，因为 j 是 undefined。

标签： javascript html css for-loop

【解决方案1】：

您当前的for loop 循环0 次，而不是循环"n" 次，其中n 是您拥有的导航元素的数量。

改变这个：

j < j.length;

到这里：

j < x.length;

如果您不关心 IE11 兼容性，您可以使用 forEach() 方法，如下所示：

document.querySelectorAll('nav').forEach(function(e){
    e.style.display='none';
})

或者，如果您愿意使用 JavaScript ES6+，您可以使用 箭头函数 将上述代码进一步缩短为一行：

document.querySelectorAll('nav').forEach(e=>e.style.display='none');

注意如果您打算使用 ES6+ 方法，您将需要使用像 Babel 这样的 JavaScript 编译器在生产环境中将您的 ES6+ 代码转换为向后兼容的 JavaScript 版本，以便将支持当前和旧版本的浏览器或环境。

【讨论】：

【解决方案2】：

jQuery 会容易得多：

$('nav').css("display", "none");

【讨论】：

没有迹象表明 OP 使用或想要使用 jQuery。