javascript - GetElementsByTagNamesとブロック表示

原文 javascript html css

HTML、CSS、JavaScriptを使用して「長く読んだ」記事を書いています。「目次」を追加して、テキスト全体のナビゲーションを改善したいと思います。奇妙に思えるかもしれませんが、タイトル(h1、h2、h3 ...)をクリックしたときに、divタグで囲まれたすべてのコンテンツを非表示にしておけばよかったのですが。したがって、ページに表示されるのはタイトルだけで、次々と空想的な目次のように見えます。私はプログラミングが初めてなので、その場で学習しています。そのための適切な方法を見つけることは、現時点では私には明らかではありません。

これが、ヘッダータグ内で使用しているものです。

<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メソッドを使用しようとしていますが、配列で動作しているため、これらを適切に動作させる方法がわかりません...

任意の助けいただければ幸いです。私がこのウェブサイトを使用するのはこれが初めてですが、それに応じて規則を守ってほしいと思います。私は英語が上手ではないので、適切な方法を教えてくれる解決策へのリンクがあればありがたいです。

どうもありがとう!
答え
これを試して、最初の要素をクリックしてください(トグル)

<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";
        }
    }
}
関連記事

javascript - InDesignのMacOSで、Ractiveが入力で押されたすべてのキーをキャプチャしないのはなぜですか?

javascript - 3つの動的ドロップダウンに入力する

javascript - angularjs、tooltipster-mouseenterの問題

javascript - $ scopeの値をAngular JSで定義されている関数の外で取得する方法

javascript - JavaScriptとJqueryを使用した単純な製品フィルター

javascript - クリック時にCSSメニューを非表示にする

javascript - リダイレクトなしのOffice 365 OAuth

javascript - テキストボックスとドロップダウン値を追加する(数学)

javascript - JQGrid-「v4.3.2の新機能」イベントをバインドしようとして成功せず

javascript - イベントハンドラーをSVGグループに動的にアタッチするにはどうすればよいですか?