3

我想用 CSS 使以下示例中的列表项成为焦点，以使使用键盘的人可以访问菜单。这可能吗？

http://jsfiddle.net/Etr4F/612/

CSS（其余的 CSS 在上面的链接中）：

div { 
    margin: 10px;
    padding: 10px; 
    border: 2px solid purple; 
    width: 200px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; }

HTML：

<div>
Select
<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>

4

1 回答 1

3

试试这个：http: //jsfiddle.net/peterjmag/EnVCf/6/

为了让它工作，父列表项需要是可聚焦的。做到这一点的一种方法就是像我在这个例子中那样让它成为一个链接，但是如果你不希望它成为一个链接，你也可以通过添加一个 tabindex 属性使它成为焦点。（这里是一个使用 tabindex 的例子：http: //jsfiddle.net/peterjmag/EnVCf/8/。）

HTML

<input>Click here first then try and tab down through below menu items without clicking on the purple box with your cursor. How can I achieve this with CSS?</input>
<ul class="nav">
    <li>
        <a href="#">Select</a>
        <ul class="dropdown">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </li>
</ul>

CSS

.nav {
    margin: 10px;
    padding: 10px;
    border: 2px solid purple;
    width: 200px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.nav > li > .dropdown {
    display: none;
}

.nav > li:hover > .dropdown,
.nav > li.hover > .dropdown {
    display: block;
    background: #f9f9f9;
    border-top: 1px solid purple;
}

.dropdown > li {
    padding: 5px;
    border-bottom: 1px solid #4f4f4f;
}

.dropdown > li:hover,
.dropdown > li.hover {
    background: white;
}

.dropdown > li:hover > a,
.dropdown > li.hover > a {
    color: red;
}

（请注意li.hover此处的其他选择器，您需要这些选择器来伪造键盘焦点上的悬停状态。）

jQuery

$.fn.accessibleDropDown = function () {
    var el = $(this);

    /* Make dropdown menus keyboard accessible */

    $("a", el).on("focus", function() {
        $(this).parents("li").addClass("hover");
    }).blur(function() {
        $(this).parents("li").removeClass("hover");
    });
}

$(".nav").accessibleDropDown();

我在这个例子中使用了 jQuery 1.9（并更新了事件处理程序以匹配），但它应该像回到 1.7 一样工作。我改编自这篇博文： http: //uablogs.missouri.edu/interface/2011/08/keyboard-accessible/

于 2013-11-07T16:10:06.593 回答