jsはカスタムドロップダウンボックスを実装します

この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

実装のアイデア:

（１）リストとスパンタグ（どのタグでも可）を作成します。

（2）リスト内の各項目にクリックイベントをバインドします。項目をクリックすると、スパンコンテンツがその項目のコンテンツに変わり、リストが非表示になります。

（3）まずリストを非表示にするには、spanタグをクリックして表示します。何も選択されていない場合は、ドキュメントをクリックしてリストを非表示にします。

（4）キーボードの各キーには独自のキーコードがあります。このキーコードを使用して、対応する操作を実行するためにどのキーが押されたかを判断することができます。次の関数は、キーボードのキーコードを取得できます。

document.addEventListener("keyup",function(e){
                console.log(e.keyCode)
})

コアコード: キーボードの上下キー、Enterキーによってトリガーされるコンテンツ

//キーボード押下イベント document.addEventListener("keyup",function(e){
                    var e=e||window.e;
                    リセット()
                    //上キー if(e.keyCode=="38"){
                        索引 - ;
                        if(インデックス<0){
                            インデックス=リスト.長さ-1
                        }
                    }
                    //下キーif(e.keyCode=="40"){
                        インデックス++;
                        if(インデックス>リストの長さ-1){
                            インデックス=0
                        }
                    }
                    //確認キーを入力if(e.keyCode=="13"){
                        cite.innerHTML=リスト[インデックス].innerHTML;    
                        ul.style.display="なし";    
                        戻る ;
                    }
                    リスト[インデックス].className="bg";
                    
})

完全なコード:

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

    <ヘッド>
        <メタ文字セット="UTF-8">
        <title>ドロップダウン メニュー</title>
        <スタイル タイプ="text/css">
            体、
            ウル、
            li {
                マージン: 0;
                パディング: 0;
                フォントサイズ: 13px;
            }
            
            ウル、
            li {
                リストスタイル: なし;
            }
            
            .div選択{
                幅: 186ピクセル;
                マージン: 80px 自動;
                位置: 相対的;
                zインデックス: 10000;
            }
            
            .divselect 引用 {
                幅: 150ピクセル;
                高さ: 24px;
                行の高さ: 24px;
                表示: ブロック;
                色: #807a62;
                カーソル: ポインタ;
                フォントスタイル: 通常;
                左パディング: 4px;
                右パディング: 30px;
                境界線: 1px 実線 #333333;
            }
            
            .divselect ul {
                幅: 184ピクセル;
                境界線: 1px 実線 #333333;
                背景色: #ffffff;
                位置: 絶対;
                zインデックス: 20000;
                上マージン: -1px;
                表示: なし;
            }
            
            .divselect ul li {
                高さ: 24px;
                行の高さ: 24px;
            }
            
            .divselect ul li a {
                表示: ブロック;
                高さ: 24px;
                色: #333333;
                テキスト装飾: なし;
                左パディング: 10px;
                右パディング: 10px;
            }
            .divselect ul li:hover{
                 背景: #eee;
            }
            .bg{
                背景: #eee;
            }
        </スタイル>

    </head>

    <本文>
        <div class="divselect">
            <span>カテゴリを選択するにはクリックしてください</span>
            <ul>
                <li>
                    <a href="javascript:;">ASP 開発</a>
                </li>
                <li>
                    <a href="javascript:;">.NET 開発</a>
                </li>
                <li>
                    <a href="javascript:;">PHP 開発</a>
                </li>
                <li>
                    <a href="javascript:;">Javascript 開発</a>
                </li>
                <li>
                    <a href="javascript:;">Java エフェクト</a>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            var cite = document.querySelector ("span"), //選択されたコンテンツ ul = document.querySelector ("ul"), //リスト list = document.querySelectorAll ("a"), //選択された項目 index = -1; //インデックス //表示するリストをクリック cite.addEventListener ("click", function (e) {
                    var e=e||window.e;
                    e.stopPropagation(); //ドキュメントにバインドされた非表示のイベントがトリガーされないようにバブリングを停止します ul.style.display="block";
                })
                //クリックを各リスト項目にバインド for(var i=0;i<list.length;i++){
                    リスト[i].onclick=関数(){
                        cite.innerHTML=this.innerHTML;    
                        ul.style.display="none"; //ここで「hide」を書く必要はありません。「hide」を書かない場合は、ドキュメントにバブルアップし、ドキュメントで非表示イベントをトリガーします}
                }
                //キーボード押下イベント document.addEventListener("keyup",function(e){
                    var e=e||window.e;
                    リセット()
                    //上キー if(e.keyCode=="38"){
                        索引 - ;
                        if(インデックス<0){
                            インデックス=リスト.長さ-1
                        }
                    }
                    //下キーif(e.keyCode=="40"){
                        インデックス++;
                        if(インデックス>リストの長さ-1){
                            インデックス=0
                        }
                    }
                    //確認キーを入力if(e.keyCode=="13"){
                        cite.innerHTML=リスト[インデックス].innerHTML;    
                        ul.style.display="なし";    
                        戻る ;
                    }
                    リスト[インデックス].className="bg";
                    
                })
                // 選択されていないときにドキュメントをクリックすると非表示になります document.addEventListener("click",function(){
                    ul.style.display="なし";
                })
                //スタイルリセット関数 reset(){
                    for(var i=0;i<list.length;i++){
                        リスト[i].className="";
                    }
                }
        </スクリプト>
    </本文>

</html>

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

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