Question

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

我有一个调用test()功能的按钮点击时我的桌子上没有任何变化。这是我的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/

Answer 1

我怀疑有一些问题对你不利。

首先，您需要确保页面中早先定义的test()函数比使用它更早。使用jQuery，这意味着使用$(function(){})包装器在DOM就绪上应用事件处理程序。您可以使用something like this answer自己估算相同的内容。

否则，只需将<script>标记放在表格之前的某个位置（可能在<head>中），onclick就可以了。

您还在使用i += 1，您可以使用i++ - 他们可以完成相同的操作。

其次，使用classList.toggle()函数来简单地添加和删除具有规则display：none的类，而不是操作style属性，而不是这样：

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/

javascript可折叠表没有jquery

1 个答案:

CSS

的JavaScript：