Anahtarda Javascript ile vurguluyu nasıl taklit edebilirim?

Question

İlk olarak, bu görevi tamamlamak için yalnızca yerel JavaScript kullanmak istiyorum.

ı özel açılan yapmak duyuyorum diyelim ve HTML kodu şöyle tür görünüyor. CSS dosyasında

<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> 

Bunun yakın bir şey var:

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

Evet, gerçekten hiçbir dropdownish davranış yoktur, ama aslında tartışmanın bu değil. Sorun şu ki bu açılır menü için klavye kontrolünü etkinleştirmek için iyi bir yol düşünemedim. İstenen sonuç şu şekildedir: Aşağı tuşuna bastığımda ilk seçenek vurgulanır; Tekrar basıyorum, ikinci seçenek vurgulanıyor ve böyle devam ediyor.

Bu noktada gördüğüm tek seçenek (sadece JS'yi incelemeye başladı), ul'un tüm çocuklarını getirmektir, bir diziye yapıştırın ve JS yöntemleriyle arka plan rengini uygun bir şekilde atayın. Aşağı tuşa her basıldığında. Fare countrol için CSS açıklanan vurgulu davranışı: Öte yandan

, hala var. Hovers'ları taklit etmenin akıllı bir yolu var mı?

Answer 1

Ben senin li-elemanlarında bir sınıfın basit atama ile gitmek ve bir keydown işleyicisi ile bunu yönlendirmek olacaktır. Aşağıdaki kodun eksiksiz olması amaçlanmamıştır, ancak birlikte çalışabileceğiniz bir şey verir.

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"); 
} 

Bir working example here

Answer 2

sıfırdan bu kodlama yerine bir kütüphane kullanmak isteyebilirsiniz.

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

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

Answer 3

Gerçeklik Açılan listede herhangi js gerek yoktu ama Bunu simüle etmek için JavaScript Olay kullanabilirsiniz. Sen bağlama, tıklayın kullanabilirsiniz vurgulu, odak, Sen JQuery yılında Seti Olay

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

için bu kullanabilir miyim JS onclick

gibi olayı kullanabilirsiniz. ..

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

Olay Listesi

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

Answer 4

ben css den vurgulu özniteliği kaldırarak öneririm görebilirsiniz. Ve basılmasını ve fare üstlerine

Bu Kanununda aşağıdaki gibi görünebilir uygulanır sadece bir Vurgulanan sınıf eklemek

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"; 
}); 

İşte JSFiddle