如何在焦点上制作下拉菜单

【问题标题】：How to make dropdown menu on focus如何在焦点上制作下拉菜单
【发布时间】：2020-09-15 08:22:17
【问题描述】：

我尝试做无障碍菜单。我使用jquery .focus，但没有反应。没有添加任何类。

我的代码：

<script type="text/javascript">
    (function($) {
        $('.menu-item-has-children a').focus( function () {
            $(this).siblings('.sub-menu').addClass('focused');
        }).blur(function(){
            $(this).siblings('.sub-menu').removeClass('focused');
        });
        $('.sub-menu a').focus( function () {
            $(this).parents('.sub-menu').addClass('focused');
        }).blur(function(){
            $(this).parents('.sub-menu').removeClass('focused');
        });
    })(jQuery);
</script>

我使用的类是正确的。控制台中没有错误

【问题讨论】：

为什么需要使用焦点？也许你可以使用悬停。焦点主要用于输入类型元素。
我需要使用 Tab 键从键盘访问下拉菜单
我在 Tab 键下的过去代码也为我工作。
所以我不知道自己做错了什么

标签： html jquery wordpress

【解决方案1】：

你好，检查一下这对我来说工作正常，可能你还有其他问题。

    (function($) {
        $('.menu-item-has-children a').focus( function () {
            $(this).siblings('.sub-menu').addClass('focused');
        }).blur(function(){
            $(this).siblings('.sub-menu').removeClass('focused');
        });
        $('.sub-menu a').focus( function () {
            $(this).parents('.sub-menu').addClass('focused');
        }).blur(function(){
            $(this).parents('.sub-menu').removeClass('focused');
        });
    })(jQuery);

.sub-menu{
  opacity:0;
}
.sub-menu.focused{
  opacity:1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
        <ul>
    <li class="menu-item-has-children">
      <a href="#">Link 1</a>
      <div class="sub-menu">
        sub menu working
      </div>
    </li>
    </ul>
</div>

【讨论】：