7

まず、ネイティブ JavaScript のみを使用してこのタスクを完了したいと考えています。

カスタム ドロップダウンを作成するとします。HTML コードは次のようになります。

<div class="dropdown">
  <span class="dropdown-label" style="display:block">Select a thing</span>
  <ul class="dropdownItemContainer">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

CSS ファイルには、これに近いものがあります。

ul.dropdownItemContainer li:hover {
  background-color: #FF0000;
}

ええ、実際にはドロップダウン的な動作はありませんが、それは実際には議論のポイントではありません. 問題は、このドロップダウンでキーボード コントロールを有効にする適切な方法が思いつかなかったことです。望ましい結果は次のとおりです。下向きのキーを押すと、最初のオプションが強調表示されます。もう一度押すと、2 番目のオプションが強調表示されます。

この時点で私が目にする唯一のオプション (JS の勉強を始めたばかり) は、 のすべてulの子を取得し、それらを配列に貼り付けて、下向きのキーが押されるたびに適切な方法で JS メソッドを介してタグに背景色を割り当てることです。押した。

一方、CSS で説明されているマウス カウントの :hover 動作はまだ残っています。ホバーをシミュレートするスマートな方法はありますか?

4

4 に答える 4

8

私はあなたのli要素にクラスを簡単に割り当てて、キーダウンハンドラーでそれを操作します。次のコードは完全なものではありませんが、操作できるものを提供します。

var active = document.querySelector(".hover") || document.querySelector(".dropdownItemContainer li");

document.addEventListener("keydown",handler);
document.addEventListener("mouseover",handler);

function handler(e){
    console.log(e.which);
        active.classList.remove("hover");
    if (e.which == 40){
        active = active.nextElementSibling || active;
    }else if (e.which == 38){      
        active = active.previousElementSibling || active;
    }else{
        active = e.target;
    }
        active.classList.add("hover");
}

ここで実際の例を見ることができます

于 2013-02-07T09:41:15.160 に答える
1

これを最初からコーディングする代わりに、ライブラリを使用することをお勧めします。

http://vebersol.net/demos/jquery-custom-forms/

http://www.dreamcss.com/2009/05/15-jquery-plugins-to-enhance-your-html.html

于 2013-02-07T09:22:11.213 に答える
0

css から hover 属性を削除することをお勧めします。そして、キープレスとマウスオーバーに適用されるホバークラスのみを追加します

これは、コードでは次のようになります

var dropDown = document.getElementsByClassName("dropdownItemContainer")[0]

document.addEventListener("keydown",function (e) {
    if(e.keyCode == 38 || e.keyCode == 40 ) {
        var key = e.keyCode
        var hovered = dropDown.getElementsByClassName("hovered")
        if(hovered.length != 0 ) {
            cur = hovered[0]
            cur.className = ""
            cur = cur[(key==38?"previous":"next")+"ElementSibling"] || dropDown.children[key==38?dropDown.children.length-1:0] 
        } else {
            cur = dropDown.children[key==38?dropDown.children.length-1:0]
        }
        cur.className="hovered"
    }
});


dropDown.addEventListener("mouseover",function (e) {
    for( var i = 0,j; j = dropDown.getElementsByClassName("hovered")[i];i++)
        j.className = "";
    e.srcElement.className = "hovered";
});

JSFiddleの例を次に示します

于 2013-02-07T10:31:32.673 に答える
0

実際には、ドロップダウンに js は必要ありませんでしたが、JavaScript イベントを使用してシミュレートできます。hover、focus、onclickなどのイベントを使用できます

JSでは、これをセットイベントに使用できます

  document.getElementById('id').addEventListener('focus',function(e){
    //place code that want ran at event happened
  }

JQuery では、 bind、click、...を使用できます。

  $('#id')bind('focus',function(e){
    //place code that want ran at event happened
  }

イベント一覧

http://www.quirksmode.org/dom/events/index.html

于 2013-02-07T09:34:02.750 に答える