JavaScript を使用してセカンダリメニューを作成する

この記事では、セカンダリメニュー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

この実装の効果図は次のとおりです。

このセカンダリメニューの効果は次のとおりです。

ボックスをクリックすると、開いているボックスの内容が引き込まれ、現在クリックされているボックスの内容が展開されます。

では、この効果はどのようにして達成されるのでしょうか?

私たちは一歩ずつ

1. まず、フレーム全体、つまりすべてのボックスが展開された外観を表示する必要があります。これは、表示/非表示がoverflow:hiddenによって行われるためです。
ただし、すべてのボックスに同じタイプのボックスを使用しないように注意してください。これは、js コードの記述に不便だからです。結局のところ、次の操作は緑のボックスをクリックして白いボックスを折りたたんだり展開したりすることなので、各日と対応するコースボックスを div 親ボックスの下に配置する必要があります。次に初期化します。高さをスパンの高さと同じに設定し、 overflow:hiddenを設定します。以下に示すように、次のコードを組み合わせることができます。

2. 次に、js 部分の作成を開始します。ボックスがクリックされると、閉じた状態から展開された状態に変わることを確認します。このボックスは span です。span の親 div のすべてのコンテンツを表示する場合は、まずdocument.getElementsByTagName("span")を介してすべての span を取得し、次に for ループを使用して各 span のonclick応答関数のparentNodeを介して対応する親ボックスを取得する必要があります。これにより、親ボックスの高さがそのscrollHeight

3. 次に、ボックスを展開するために span をクリックしたときに、展開されたボックスを折りたたむ必要があります。このとき、前回クリックされたボックスを記録するための変数now が必要です。初期値を null に設定します。now が現在クリックされているスパンと等しくない場合は、now の親ボックスを取得し、その高さをスパンの高さに設定してから、現在クリックされているスパンを展開します (展開方法については、2 番目のポイントで既に説明しました)。now が現在クリックされているスパンと等しい場合は、その親ボックスの高さを取得します。それがスパンの高さと等しい場合は、その高さをscrollHeightの値に設定し、そうでない場合はスパンの高さに設定します。

4.タイマーを設定し、親ボックスの高さを増減する準備ができたら呼び出します。親ボックスの高さがスパンの高さに達するか、 scrollHeightに達すると、タイマーをオフにします（タイマーは2つ設定できます）。

コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }

        。容器 {
            幅: 300ピクセル;
            高さ: 700ピクセル;
            マージン: 100px 自動;
        }

        .コンテナdiv {
            高さ: 43px;
            オーバーフロー: 非表示;
        }

        .コンテナ div span {
            幅: 150ピクセル;
            高さ: 40px;
            行の高さ: 40px;
            境界線の半径: 15px;
            表示: ブロック;
            テキスト配置: 中央;
            背景色: rgba(104, 250, 201, 0.849);
            カーソル: ポインタ;
        }

        {
            幅: 150ピクセル;
            高さ: 40px;
            行の高さ: 40px;
            テキスト装飾: なし;
            表示: ブロック;
            テキスト配置: 中央;
        }
    </スタイル>
</head>

<本文>
    <div class="コンテナ">
        <div id="">
            <span id="one">月曜日</span>
            視覚化
            視覚化
        </div>
        <div id="">
            火曜日
            <a href="">アルゴリズム設計</a>
            <a href="">グラフィックス</a>
            <a href="">デザイングループコースデザイン</a>
            オペレーティング·システム
        </div>
        <div id="">
            <span id="three">木曜日</span>
            <a href="">状況と方針</a>
            オペレーティング·システム
        </div>
        <div id="">
            <span id="four">金曜日</span>
            <a href="">アルゴリズム設計</a>
        </div>
    </div>

    <スクリプト>
        menu = document.getElementsByTagName("span");
        now = null とします。
        (i = 0 とします; i < menu.length; i++) {
            menu[i].onclick = 関数 () {
                par = menu[i].parentNodeとします。
                もし（今 === i）{
                    （par.style.height === "43px"の場合）{
                        オープン(パー);
                    }
                    それ以外 {
                        閉じる(par);
                    }
                }
                それ以外 {
                    if (now !== null) {
                        メニュー[now].parentNode を閉じます。
                    }
                    オープン(パー);
                    今 = 私;
                }
            }
        }

        関数 open(par) {
            time = setInterval(() => { を設定します。
                num = par.offsetHeightとします。
                （数値 >= par.scrollHeight）の場合{
                    クリア間隔(tem);
                }
                par.style.height = num + 1 + "px";
            }, 7);
        }

        関数close(par){
            time = setInterval(() => { を設定します。
                num = par.offsetHeightとします。
                （数値<= 43）の場合{
                    クリア間隔(tem);
                    戻る;
                }
                par.style.height = num - 1 + "px";
            }, 7);
        }

    </スクリプト>
</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: