ドロップダウンメニューを表示または非表示にするJavaScript

この記事では、ドロップダウンメニューを表示および非表示にするJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

場合によっては、このページ効果が必要になります。

マウスを要素の上に移動すると、ドロップダウンメニューが実装されます。マウスを要素から離すと、ドロップダウンメニューは消えます。

実装のアイデア

1. ボックスには 2 つの部分があり、下部はサブメニューで、最初は非表示に設定されています: display: none;
2. マウスがボックスに移動すると、トリガーイベント---onmouseover、jsは下のサブメニューの表示値を---blockに設定し、サブメニューを表示します。
3. マウスをボックスから離すと、イベント - - -onmouseout がトリガーされ、js は下のサブメニューの表示値を - - -none に設定し、サブメニューを再び非表示にします。
4. 必要に応じてフォントの色、背景色、その他のスタイルを変更します。

コードサンプル

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

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>操作要素 - Sina ドロップダウン メニュー</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
        }
        
        ul li {
            リストスタイル: なし;
        }
        
        {
            テキスト装飾: なし;
            色: #4c4c4c;
        }
        
        ホバー{
            色: #e88415;
        }
        
        。箱 {
            幅: 80ピクセル;
            マージン: 50px 自動;
            フォントサイズ: 14px;
            色: #4c4c4c;
        }
        
        .weibo{
            位置: 相対的;
            背景色: #fcfcfc;
        }
        
        .weibo {
            表示: ブロック;
            高さ: 40px;
            行の高さ: 40px;
            左パディング: 20px;
        }
        
        。変化 {
            色: #f9a74f;
            背景色: #edeef0;
        }
        
        私 {
            位置: 絶対;
            上位: 50%;
            右: 15px;
            上マージン: -4px;
            幅: 5px;
            高さ: 5px;
            border-bottom: 1px 実線オレンジ赤;
            border-right: 1px 実線オレンジ赤;
            変換: 回転(45度);
        }
        
        .weiboリスト{
            表示: なし;
        }
        
        .weiboList li a {
            表示: ブロック;
            幅: 80ピクセル;
            高さ: 33px;
            行の高さ: 33px;
            左パディング: 15px;
            下境界線: 1px 実線 #fecc5b;
            背景色: #fff;
        }
        
        .weiboList li a:hover {
            背景色: #fff5da;
        }
    </スタイル>
</head>

<本文>
    <div class="box">
        <div class="weibo"><a href="#" >Weibo<i class="select"></i></a></div>
        <ul class="weiboList">
            <li><a href="#" >プライベートメッセージ</a></li>
            <li><a href="#" >コメント</a></li>
            <li><a href="#" >@私</a></li>
        </ul>
    </div>

    <スクリプト>
        var box = document.querySelector('.box');
        var weibo = document.querySelector('.weibo');
        var weiboList = document.querySelector('.weiboList');

        box.onmouseover = 関数() {
            weibo.className = 'weibo変更'
            weiboList.style.display = 'ブロック';

        }

        box.onmouseout = 関数() {
            weibo.className = 'weibo';
            weiboList.style.display = 'なし';
        }
    </スクリプト>
</本文>

</html>

ページ効果: