javascript - GetElementsByTagNames 和 block 显示

Question

我正在使用 HTML、CSS 和 JavaScript 写一篇“长读”文章，我想通过添加“目录”来改进整个文本的导航。这可能看起来很奇怪，但我希望我可以通过在单击标题(h1、h2、h3 ...)时隐藏包裹在 div 标签中的所有内容来做到这一点。因此，页面上只会显示标题，一个接一个，看起来就像一个花哨的目录。由于我是编程新手，所以我正在学习。目前，找到一个合适的方法对我来说并不明显。

这是我在 header 标记中使用的内容。

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

当然，这是一个非常简单的 JS“触发器”函数，仅适用于一个已识别的元素。

function ff(id)
{
    if(document.getElementById(id).style.display == "none")
        document.getElementById(id).style.display = "block";
    else    document.getElementById(id).style.display = "none";
}

我怎样才能使该函数适用于文档的每个 div 标签？我正在尝试使用 getElementsByClass 或 getElementsByTagName 方法，但我不知道如何使它们正常工作，因为它正在处理数组...

如有任何帮助，我们将不胜感激。这是我第一次使用这个网站，我希望我遵守相应的规则。由于我的英语不是很好，我也很感激任何指向可以向我展示相关方法的解决方案的链接。

非常感谢你!

Answer 1

试试这个，点击第一个元素(切换)

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

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

<h1>not hide</h1>

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

需要说明的是，我做了一个 fiddle ，但这段代码似乎只有在我的浏览器中测试后才能工作。不知道为什么

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