Question

我有鼠标悬停或键盘焦点上显示的CSS下拉菜单，虽然可以使用鼠标访问下拉菜单，但当您尝试使用键盘访问它时，下拉菜单会消失（但您仍会循环显示）项目）。

在使用键盘访问下拉菜单项时，任何人都有一些关于如何保持下拉列表可见的想法？ CSS代码如下。

您可以通过以下网址访问演示：http://testingtesting1.info/joomla-test/

HTML代码由Joomla生成。

/* Parent menu items */
.h-nav {
    width:720px;
    height:90px;
}
.h-nav ul {
    left:0;
}
.h-nav li {
    display:block;
    list-style:none;
    position:relative;
    float:left;
    margin-right:10px;
}
.h-nav a {
    display:block;
    padding:33px 24px;
    margin:0;
    float:left;

}
.h-nav li a:hover, 
.h-nav li a:focus {
    background-color:#ffbb58;
}
.h-nav li.parent {
    background:url("../../images/standard/arrow-down.png")no-repeat right;
}
/* Sub menu links */
.h-nav li li a {
    text-align:left;
}

.h-nav li li a:hover,
.h-nav li li a:focus {
    text-decoration:underline; 
    background-color:transparent; /* hide the background-color:#ffbb58 */
}
/* 1st Sub menu dropdown */
.h-nav li.parent ul.nav-child {
    margin:4px auto;
    position:absolute;
    margin-left:-9999%; /* using margin-left instead of display:none; because display isn't read by screen readers */
    text-align:left;
    padding:10px 5px;
    width:220px;
    background:url("../../images/standard/bg-submenu.png") repeat;
    z-index:9999;
    /*rounded corners - rounding only bottom corners */
    border-bottom-right-radius:10px 10px;
    border-bottom-left-radius:10px 10px;
    -moz-border-bottom-right-radius:10px 10px;
    -webkit-border-bottom-left-radius:10px 10px;    
}
/* keeps the drop down visible when hovering over parent menu */
.h-nav li.parent:hover .nav-child,
.h-nav li.parent a:focus + ul.nav-child {
    margin:auto;
    top:90px;
}
/* Resize the padding for the drop down menu items */
.h-nav li li a {
    display:block;  
    padding:2px 25px;
}

Answer 1

如果您无法访问html并手动添加tabindex，或者每次都动态生成html，您可以使用Javascript将tabindex添加到{{1}元素（这是用jQuery）：

li

或常规Javascript：

$(document).ready(function(){
    $('.h-nav>li').attr('tabindex',0);
});

如果您无法添加window.onload=function(){ menu = document.getElementById("h-nav") navElems = menu.getElementsByTagName('li'); for(e = 0; e < navElems.length; e++){ if(navElems[e].parentNode == menu){ navElems[e].tabIndex = 0; } } }，我认为没有其他方法可以专注于tabindex

编辑9/21/13

这并不完美，但它只适用于键盘。

JS Fiddle

为了使它工作，你不能有一个含有带锚的li的子ul;锚必须是兄弟姐妹。这个解决方案使用li选择器，遗憾的是它只适用于目标元素之后的兄弟姐妹，所以它会使聚焦之前的锚点消失。

使用键盘访问时，焦点上的CSS下拉菜单消失

1 个答案: