Question

我想让以下示例中的列表项可以理想地使用CSS，以便使用键盘的人可以访问菜单。这可能吗？

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/

添加：焦点以在下拉菜单中列出项目

1 个答案:

HTML

CSS

的jQuery