这是一个简单的问题，我似乎无法弄清楚，每个谷歌搜索都会返回一百万种通过 jquery 执行此操作的方法，但我更喜欢使用 vanilla javascript，因为我对它很陌生并且想学习它在使用任何库之前。我想做的是让一个按钮在单击时折叠表格的一部分，然后在再次单击时再次显示这些隐藏的部分。基本上只是切换一类元素的显示。
我有一个调用 test() 函数的按钮
单击时我的 table 上没有任何变化。这是我的 JavaScript 代码。我使用 collapse[0] 因为如果我理解正确的话 collapse 是一个 nodeList 并且我总是一起关闭和打开所有这些，所以我只需要检查第一个元素.
function test() {
var collapse = document.getElementsByClassName("catOne");
var i = 0;//Counter for loops
if(collapse[0].style.display === "table-row"){
for(i = 0; i < collapse.length; i += 1){
collapse[i].style.display = "none";
}
}
if(collapse[0].style.display === "none"){
for(i = 0; i < collapse.length; i += 1){
collapse[i].style.display = "table-row";
}
}
}
我已经使用以下代码测试了该功能:
function test() {
var collapse = document.getElementsByClassName("catOne");
var i = 0;//Counter for loops
for (i = 0; i < collapse.length; i += 1) {
collapse[i].style.display = "none";
}
它在折叠元素方面工作得很好，所以显然问题出在我的 if 语句上，但我的 IDE Netbeans 不会抛出任何错误，据我所知它应该可以工作。
感谢您的帮助。
链接到 html 和 javascript: https://jsfiddle.net/ozjbekjy/
最佳答案
我怀疑有一些问题对您不利。
首先，您需要确保 test()函数在页面中的定义早于它的使用。对于 jQuery，这意味着使用 $(function(){})用于在 DOM 上应用事件处理程序的包装器。您可以使用 something like this answer 自己近似相同的事情.
否则，只需放置 <script>在表格之前的某个位置标记(可能在 <head> 中)，并且 onclick 将起作用。
您还使用 i += 1您可以在哪里使用i++ - 他们完成相同的行为。
其次，不要操作样式属性，而是使用 classList.toggle()函数来简单地添加和删除具有规则 display: none 的类，像这样:
CSS
.hide-me {
display: none;
}
JavaScript
function test() {
var collapse = document.getElementsByClassName("catOne");
for (var i = 0; i < collapse.length; i++) {
collapse[i].classList.toggle("hide-me");
}
}
您的 JSFiddle，以及建议的更新:https://jsfiddle.net/ozjbekjy/4/
关于没有jquery的javascript可折叠表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36110128/