javascript - 添加 :focus to list items in dropdown menu

Question

我想使用 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>

Answer 1

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

为了让它工作，父列表项需要是可聚焦的。一种方法是像我在本例中所做的那样将其设为链接，但如果您不希望它成为链接，您也可以 make it focusable by adding a tabindex attribute . (这是一个使用 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/