Question

我有一个移动导航-我正在尝试编写一些内容，使您直接进入“关闭”按钮，以便用户可以关闭移动导航。当菜单中的最后一个项目失去焦点时，我试图触发此操作。（使用键盘在菜单上切换时）

但是，现在正在发生的事情-当最后一项获得焦点时，它会直接跳到关闭按钮。因此，您甚至没有机会单击链接。

我希望当您离开元素而不是专注于元素时会发生“模糊” ...

为什么会这样？

$('.closeNav + ul a[href="#lastLink"]').blur(function() {
    $('.closeNav').focus();
});


<nav class="mobile fullScreen active" tabindex="0">
    <div class="in">
        <div class="closeNav" tabindex="0" aria-label="Close Navigation selectable">
            <img src="#">
        </div>
        <ul>
            <li class="first"><a href="#" class="">link</a>
                <ul>
                    <li class="first"><a href="#">link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li class="last"><a href="#" >link</a></li>
                </ul>
            </li>


            <li><a href="#">link</a>
                <ul>
                    <li class="first"><a href="#">link</a></li>
                </ul>
            </li>
            <li><a href="#" >link</a></li>
            <li class="last"><a href="#" class="">link</a>
                <ul>
                    <li class="first"><a href="#lastLink">Last link</a></li>
                </ul>
            </li>


        </ul>
    </div>
</nav>

Answer 1

要实现此目的，您需要使用下一个兄弟姐妹选择器$("prev ~ siblings") 选择所有在“ prev”元素之后的兄弟元素，它们具有相同的父元素，并与过滤的“兄弟姐妹”选择器匹配。

$('.closeNav ~ ul a[href="#lastLink"]').blur(function() {
    $('.closeNav').focus();
});

为什么JQuery“模糊”事件侦听器无法按预期工作？

1 个答案: