我有一个简单的下拉菜单,我想有用户可以通过键盘箭头(向上/向下)在下拉菜单导航的可能性。
下面是代码:
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
当我使用tab
时,这很好用,但是我想使用箭头(向上/向下),有人能帮我吗?
5条答案
按热度按时间5uzkadbs1#
我会将侦听器添加到下拉列表及其内容中,而不是整个页面。
通过使用下拉列表的
dataset
属性存储选定的索引,可以对上一个/下一个子级调用focus()
。t1qtbnec2#
只需在下拉列表中添加keydown事件,使用焦点播放并取消滚动
mgdq6dx13#
您可以编写一个函数来侦听击键(当下拉菜单打开时),确定键并相应地更改焦点。
hec6srdp4#
不要忘记在选择下拉选项并关闭后立即删除eventListener
cx6n0qe35#
米哈尔玛
所以,通过在互联网上搜索(关键词“HTML5键盘导航下拉”),我发现了这个:https://dev.to/emmabostian/creating-a-custom-accessible-drop-down-3gmo
您可以在下拉列表周围使用一个元素。
可悲的是,这使得一些看起来很垃圾的样式,这就是文章的其余部分。