不带jquery的javascript可折叠表

这是一个我似乎无法理解的简单问题，每一次谷歌搜索都会通过jquery返回一百万种实现这一点的方法，但我更喜欢使用vanilla javascript，因为我对它不熟悉，希望在使用任何库之前好好学习它。我试图做的是在单击时让按钮折叠表的一部分，然后在再次单击时再次显示这些隐藏部分。基本上只是切换一类元素的显示

我有一个按钮可以调用

test（）

函数 单击“我的表”时，没有任何更改。这是我的javascript代码。我使用的是

collapse[0]

，因为如果我理解正确，那么

collapse

是一个节点列表，我总是同时关闭和打开所有这些元素，所以我只需要检查第一个元素

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";
        }
    }    
}

功能测试（）{
var collapse=document.getElementsByClassName（“catOne”）；
var i=0；//循环的计数器
if（折叠[0]。style.display==“表行”）{
对于（i=0；i

我已经用以下代码测试了该函数：

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";
    }

功能测试（）{
var collapse=document.getElementsByClassName（“catOne”）；
var i=0；//循环的计数器
对于（i=0；i

它可以很好地折叠元素，因此问题显然在于if语句，但我的IDE Netbeans不会抛出任何错误，而且据我所知，它应该可以正常工作

谢谢你的帮助

---

链接到html和javascript:

我怀疑有一些问题不利于您

首先，您需要确保

test（）

函数在页面中的定义早于它被使用的时间。对于jQuery，这意味着使用

$（function（）{}）

包装器在DOM ready上应用事件处理程序。您可以使用类似的方法

否则，只需将

标记放在表之前的某个位置（可能在

中），onclick就可以工作了

您也在使用

i++=1

，您可以在其中使用

i++

——它们完成相同的行为

其次，不要操纵style属性，而是使用函数简单地添加和删除一个具有规则

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");
  }
}

功能测试（）{
var collapse=document.getElementsByClassName（“catOne”）；
对于（var i=0；i

---

您的JSFIDLE，以及建议的更新：

我怀疑存在一些不利于您的问题

首先，您需要确保

test（）

函数在页面中的定义早于它被使用的时间。对于jQuery，这意味着使用

$（function（）{}）

包装器在DOM ready上应用事件处理程序。您可以使用类似的方法

否则，只需将

标记放在表之前的某个位置（可能在

中），onclick就可以工作了

您也在使用

i++=1

，您可以在其中使用

i++

——它们完成相同的行为

其次，不要操纵style属性，而是使用函数简单地添加和删除一个具有规则

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");
  }
}

功能测试（）{
var collapse=document.getElementsByClassName（“catOne”）；
对于（var i=0；i

---

您的JSFIDLE，以及建议的更新：

Netbeans只会告诉您使用的语法是否可解析，而不是逻辑是否正确。也就是说，如果您可以包括一个您正在使用的标记示例，并更好地描述您所追求的行为，那么您试图做的事情似乎并不十分困难因此，您可以创建javascript和html@daniel这里是@TiesonT。我正在尝试这样做，所以我单击一个按钮，表格的几行折叠，然后再次单击按钮时，表格将重新显示。就像jquery的toggle（）一样请参阅我为markupNetbeans发布的JSFIDLE链接，它只会告诉您所使用的语法是否可分析，而不是逻辑是否正确。也就是说，如果您可以包含所使用的标记的示例，并更好地描述您所追求的行为，那么您尝试做的事情似乎并不十分困难。您有机会吗可以创建javascript和html@daniel这里是@TiesonT。我正在尝试这样做，因此我单击一个按钮，表格的几行折叠，然后再次单击按钮时，表格将重新显示。与jquery的toggle（）类似，请参阅我发布的JSFIDLE链接以获取标记