首先,我只想使用本機JavaScript來完成此任務。如何使用Javascript在keydown上模擬懸停?
假設我要製作一個自定義下拉菜單,而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;
}
呀,真的沒有dropdownish行爲,但它實際上是不在討論點。問題是,我想不出一個體面的方式來爲這個下拉菜單啓用鍵盤控制。期望的結果如下:我按下向下鍵,第一個選項突出顯示;我再次按下它,第二個選項突出顯示,依此類推。
我在這裏看到的唯一選項(剛開始學習JS)是獲取所有ul
的孩子,將stick'em粘貼到一個數組中,並通過JS方法以適當方式爲標籤分配背景顏色每當按下向下鍵時。
另一方面,我仍然在CSS中描述鼠標控制的懸停行爲。有沒有一種智能的模擬盤旋的方法?
鍵盤導航的例子大量使用':焦點'。 –
@AlessandroVendruscolo是真實的,但我不能真正關注任何比或常規控制元素都好的東西,對嗎? :) –
只有jQuery解決方案出現在我的腦海裏:( –