Javascript GetElementsByTagNames和块显示

我正在写一篇“长期阅读”的文章，使用HTML、CSS和JavaScript，我想通过添加一个“目录”来改进整个文本的导航。这可能看起来很奇怪，但我希望我可以在点击标题（h1、h2、h3…）时隐藏包装在div标记中的所有内容。因此，只有标题会一个接一个地显示在页面上，看起来就像一个奇特的目录。因为我是编程新手，所以我在不断地学习。目前，我还不清楚如何找到合适的方法

下面是我在标题标记中使用的内容

<h1 onclick="ff('hide');">

如何使该函数适用于文档的每个div标记？我试图使用getElementsByClass或getElementsByTagName方法，但我不知道如何使它们正常工作，因为它与数组一起工作

任何帮助都将不胜感激。这是我第一次使用这个网站，我希望我能遵守相应的规则。因为我英语说得不好，所以我也希望能找到一个能给我提供相关解决方案的链接

---

非常感谢你

试试这个，点击第一个元素（切换）

切换
隐藏
不隐瞒
隐藏

为了清楚起见，我做了一些修改，但这段代码似乎只有在我的浏览器中进行测试后才能工作。不知道为什么

function ff(c) {
    //get array
    var arr = document.getElementsByClassName(c);
    //single element
    var el = "";

    //loop through your collection
    for (i = 0; i < arr.length; i++) {
        el = arr[i];
        //the function
        if (el.style.display == "none") {
            el.style.display = "block"; 
        }else {
            el.style.display = "none";
        }
    }
}

功能ff（c）{
//获取数组
var arr=document.getElementsByClassName（c）；
//单元素
var el=“”；
//循环浏览你的收藏
对于（i=0；i

为了清楚起见-如果他们单击任何标题，那么所有div都将消失。然后，如果他们再次单击任何标题，所有div将再次可见？顺便说一句，欢迎使用SO。您的问题很好，而且非常清楚：）如果使用

node.style.display='

节点将返回其原始值。当

node.style.display

开始为空时，我发现这样做更符合逻辑：）谢谢所有的答案！您提供的代码工作得非常好！现在看起来很酷：）不客气。如果你觉得这个答案很有用，你可以把它设为“已接受”，让我获得一些声誉。祝你今天愉快：）做完了，再次谢谢。我花了一些时间才弄明白怎么做^^

<h1 onclick="ff('toHide');">toggle</h1>

<h1 class="toHide">hide</h1>

<h1>not hide</h1>

<h1 class="toHide">hide</h1>

function ff(c) {
    //get array
    var arr = document.getElementsByClassName(c);
    //single element
    var el = "";

    //loop through your collection
    for (i = 0; i < arr.length; i++) {
        el = arr[i];
        //the function
        if (el.style.display == "none") {
            el.style.display = "block"; 
        }else {
            el.style.display = "none";
        }
    }
}