javascript - 使下拉菜单键盘和鼠标可浏览

Question

我正在为一个需要自定义下拉菜单的客户开发一个元素，该菜单可以通过单击打开它或使用键盘切换到它来访问。

目前，我的解决方案几乎完美运行，但有一个问题:第一次单击下拉菜单时，它会闪烁打开然后再次关闭。我确定我的 JavaScript 和 jQuery 存在一个简单的故障!

所需的功能是这样的:

1. 用户必须能够通过点击打开下拉菜单。 (完成，但有问题)
2. 用户必须能够点击另一个菜单，并关闭前一个菜单并打开新菜单。 (完成)
3. 用户必须能够单击页面上的任何其他位置并关闭打开的菜单。 (完成)
4. 用户必须能够沿着菜单栏切换，突出显示每个链接，并在切换到菜单时打开菜单。 (完成)
5. 在离开到下一个菜单或链接、关闭上一个菜单之前，Tab 键必须向下移动整个菜单。 (完成)

正如我在这里所说的，我几乎完全可以使用它，但键盘焦点识别也会检测鼠标焦点，这意味着当我单击时，它会在鼠标点击后立即触发键盘焦点，然后再次将其关闭。

至少我是这么认为的。请帮忙!

JavaScript 代码

$(document).ready(function() {
function toggle(select) {
    closeAll(select);
    if(select.hasClass("expanded")) {
        select.removeClass("expanded");
    } else {
        select.addClass("expanded");
    }
}
function closeAll(select) {
    var close = $(document).find("#navigation li.select.expanded");
    if(select != null) {
        close = close.not(select);
    }
    close.removeClass("expanded")
}

$("#navigation > ul > li.select > a").click(function(event) {
    event.preventDefault();
    toggle($(this).parent());
});
$(document).mouseup(function(event) {
    var select = $("#navigation > ul > li.select.expanded");
    if(!select.is(event.target) && select.has(event.target).length === 0) {
        closeAll();
    }
});
$(document).on("focus", "#navigation > ul > li > a", function () {
    closeAll();
    if($(this).parent().hasClass("select")) {
        toggle($(this).parent());
    }
});
});

HTML 代码

    <div id="navigation">
        <ul>
            <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
            <li class="select">
                <a href="#"><i class="fa fa-users"></i> Find a Society</a>
                <ul>
                    <li><a href="#">Scotland</a></li>
                    <li><a href="#">North West</a></li>
                    <li><a href="#">North East</a></li>
                    <li><a href="#">Midlands</a></li>
                    <li><a href="#">Eastern Counties</a></li>
                    <li><a href="#">Central Counties</a></li>
                    <li><a href="#">Wales</a></li>
                    <li><a href="#">South West Counties</a></li>
                    <li><a href="#">Southern Counties</a></li>
                    <li><a href="#">South East Counties</a></li>
                    <li><a href="#">Greater London</a></li>
                </ul>
            </li>
        </ul>
    </div>

当前设计

Answer 1

我最近不得不创建一个类似的下拉列表，其中包含一些复杂的功能，例如预先输入列表过滤，并在此过程中解决了这个问题。

诀窍是只有一个入口点进入您的下拉菜单，所有其他方法都必须调用同一事件。在你的例子中，它是标签焦点，所以你想在点击时触发它:

编辑:根据 OP 评论修复打开/关闭

$("#navigation > ul > li.select > a").click(function(event) {
    event.preventDefault();
    if($(this).hasClass('expanded')){
        closeAll()
    }
    else {
        $(this).focus(); #Here the magic happens :)
    }
});

现在点击事件会触发一个选项卡焦点事件，然后切换下拉列表的可见性。

通过事件委托(delegate)和 css :not() 选择器可以简化单击外部时关闭下拉菜单的操作。这也应该比您当前的实现稍微快一些，尽管 css 选择器的长度可能并不意味着太多。

$(document).on('mouseup',':not(#navigation > ul > li.select.expanded)',(function(event) {
    closeAll();
});

顺便说一句，可以使用 Jquery 的 toggleClass 简化您的切换功能。

function toggle(select) {
    closeAll(select);
    select.toggleClass('expanded');
}