ドロップダウンメニューを実装するためのネイティブ js

ドロップダウンメニューも実生活では非常に一般的です。実装に使用される js コードは、タブ選択やアコーディオンのものとほぼ同じなので、ここでは詳細には触れません。

Suning.com の公式サイトを参考にドロップダウンメニューを作成しました。実装コードは次のとおりです。

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

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドロップダウン メニュー</title>
    <スタイル>
        体、
        ul {
            パディング: 0;
            マージン: 0;
        }
        体{
            背景色:#ccc;
        }
        li {
            リストスタイル: なし;
        }
        {
            テキスト装飾: なし;
        }
        ホバー{
            色: rgb(235, 98, 35);
        }
        .nav {
            フロート: 右;
            上マージン: 10px;
            右マージン: 80px;
            ディスプレイ: フレックス;
            幅: 270ピクセル;
            高さ: 100px;
        }
      
        .nav>li {
            幅: 80ピクセル;
            マージン: 5px;
            テキスト配置: 中央;
        }
        .選択された{
            幅: 80ピクセル;
            背景色:#fff;
            色: rgb(235, 98, 35);
            境界線:1px実線rgb(196, 194, 194);
        }
        .nav>li div:n番目の子(1){
            高さ: 30px;
            行の高さ: 30px; 
        }
        .nav>li div:n番目の子(2){
            表示: なし;
            高さ: 160px;
            幅: 80ピクセル;
            背景色: #fff;
            境界線:1px実線rgb(196, 194, 194);
            border-top:1px 実線 #fff;
            行の高さ: 70px;
        }
        .nav>li>div:n番目の子(2) li{
            高さ: 40px;
            行の高さ: 40px;
        }
    </スタイル>
</head>

<本文>
    
    <ul class="nav">
        <li>
            <div><a herf="#">私の注文</a></div>
            <div>
            <ul>
                <li><a herf="#">支払い待ち</a></li>
                <li><a herf="#">発送待ち</a></li>
                <li><a herf="#">配送待ち</a></li>
                <li><a herf="#">評価待ち</a></li>
            </ul>
            </div>
        </li>    
        <li>
            <div><a herf="#">私の Yigoo</a></div>
            <div>
                    <ul>
                            <li><a herf="#">私の中古品</a></li>
                            <li><a herf="#">私のフォロー</a></li>
                            <li><a herf="#">私の財務</a></li>
                            <li><a herf="#">蘇寧会員</a></li>
                        </ul>
            </div>
        </li>
        <li>
            <div><a herf="#">私のホームページ</a></div>
            <div>
                    <ul>
                            <li><a herf="#">アバター</a></li>
                            <li><a herf="#">ニックネーム</a></li>
                            <li><a herf="#">署名</a></li>
                            <li><a herf="#">住所</a></li>
                        </ul>
            </div>
        </li>
    </ul>
    <スクリプト>
        var s = document.querySelectorAll(".nav li div:nth-child(1)");
        var d = document.querySelectorAll(".nav li div:nth-child(2)");
        (var i=0;i<s.length;i++){
            s[i].インデックス=i;
            s[i].onmouseover=関数(){
                (var j=0;j<s.length;j++){
                    s[j].className="";
                    d[j].style.display="なし";
                }
                this.className="選択済み";
                d[this.index].style.display="ブロック";
            }
        }
    </スクリプト>
   
</本文>

</html>

効果図は以下のとおりです。