使用焦点进行辅助功能时无法关闭下拉菜单答案

【问题标题】：使用焦点进行辅助功能时无法关闭下拉菜单
【发布时间】：2022-01-23 08:32:53
【问题描述】：

一旦焦点从下拉菜单移动到常规导航项目，我正在尝试关闭下拉菜单。我可以打开焦点下拉菜单，然后关注所有菜单项，但是当按下选项卡到下一个父项时。下拉菜单仍然显示。

HTML

常规导航项

<li class="nav-item active">
 <a id="regularNavItem" class="nav-link" href="{{ link.url }}" aria-label="{{ link.title }}" tabindex="0">{{ link.title }}</a>
</li>

带下拉菜单的菜单项


<li class="nav-item dropdown has-megamenu">
    <a id="dropdownMenuButton" class="megamenu-item nav-link dropdown-toggle" href="{{ link.url }}" data-toggle="dropdown" aria-label="{{ link.title }}{{ forloop.index }}">
    {{ link.title }}
  </a>
     <div class="dropdown-menu megamenu mt-0 pt-0 pb-0">
    <div class="row">
      <div class="{% if section.settings.featured_product_enable %}col-md-9{% else %}col-md-12{% endif %}">
        <div class="row h-100">
          {% for childlink in link.links %}
            <ul class="child-menu {{ _colClass }} MegaMenu__Item pb-3">
              <div class="dropdown-header">
                <a href="{{ childlink.url }}" class="">{{ childlink.title }}</a>
              </div>
              <div class="dropdown-divider"></div>
              {% for sublink in childlink.links %}
                <a href="{{ sublink.url }}{% if sublink.type == 'product_link' %}{% if sublink.object.variants.size > 1 %}?variant={{ sublink.object.variants.first.id }}{% endif %}{% endif %}" aria-label="{{ childlink.title }}{{ forloop.index }}">
                  <li class="dropdown-menu-item">{{ sublink.title }}</li>
                </a>
              {% endfor %}
            </ul>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</li>

$(document).ready(function() {
  var x = document.getElementById("dropdownMenuButton");
  var y = document.getElementById("regularNavItem");
  var dropdownMenu = document.querySelector(".dropdown-menu");

  x.addEventListener("focus", onFocus);
  y.addEventListener("focus", onFocus);

  function onFocus() {
    $(".dropdown-menu-item").focus();
    dropdownMenu.classList.add("show-dropdown-menu");
  }

  function focusOff() {
    dropdownMenu.classList.remove("show-dropdown-menu");
  }
});

风格

.show-dropdown-menu {
  display: block;
  visibility: visible !important;
  opacity: 1 !important;
}

【问题讨论】：

你在代码的什么地方使用了focusOff()函数？

标签： javascript jquery

【解决方案1】：

尝试使用 jquery 切换类，在事件中使用它

$(".dropdown-menu-item").toggleClass("show-dropdown-menu")

参考资料 Jquery Toggle Class

【讨论】：