Question

我正在关闭手机的切换菜单，但遇到了一个小问题。所以我想要的是当切换菜单处于活动状态时，用户能够通过触摸其设备屏幕上的某个位置来将其关闭。我几乎可以正常工作了，但是当关闭时，标题栏中的购物篮消失了，菜单也没有显示为汉堡包图标。我注意到，在Wordpress网站上工作。我猜问题出在这里： aria-expanded =“ true” ，因为在用户关闭默认值后，默认值应该为false。所以我的网站是： https://www.ngraveme.com/bg

我的JQuery代码是：

jQuery(document).ready(function($) {
  var $menu = $('.menu');


  $('.menu-toggle').click(function() {
    $menu.toggle();
  });

  $(document).mouseup(function(e) {
    if (!$menu.is(e.target) // if the target of the click isn't the container...
      &&
      $menu.has(e.target).length === 0) // ... nor a descendant of the container
    {
      $menu.hide();
    }
  });
});

根据我在wordpress中使用的主题编写的原始js代码是：

/**
 * navigation.js
 *
 * Handles toggling the navigation menu for small screens.
 * Also adds a focus class to parent li's for accessibility.
 * Finally adds a class required to reveal the search in the handheld footer bar.
 */
(function() {
  // Wait for DOM to be ready.
  document.addEventListener('DOMContentLoaded', function() {
    var container = document.getElementById('site-navigation');
    if (!container) {
      return;
    }

    var button = container.querySelector('button');
    if (!button) {
      return;
    }

    var menu = container.querySelector('ul');
    // Hide menu toggle button if menu is empty and return early.
    if (!menu) {
      button.style.display = 'none';
      return;
    }

    button.setAttribute('aria-expanded', 'false');
    menu.setAttribute('aria-expanded', 'false');
    menu.classList.add('nav-menu');

    button.addEventListener('click', function() {
      container.classList.toggle('toggled');
      var expanded = container.classList.contains('toggled') ? 'true' : 'false';
      button.setAttribute('aria-expanded', expanded);
      menu.setAttribute('aria-expanded', expanded);
    });

    // Add class to footer search when clicked.
    document.querySelectorAll('.storefront-handheld-footer-bar .search > a').forEach(function(anchor) {
      anchor.addEventListener('click', function(event) {
        anchor.parentElement.classList.toggle('active');
        event.preventDefault();
      });
    });

    // Add focus class to parents of sub-menu anchors.
    document.querySelectorAll('.site-header .menu-item > a, .site-header .page_item > a, .site-header-cart a').forEach(function(anchor) {
      var li = anchor.parentNode;
      anchor.addEventListener('focus', function() {
        li.classList.add('focus');
      });
      anchor.addEventListener('blur', function() {
        li.classList.remove('focus');
      });
    });

    // Add an identifying class to dropdowns when on a touch device
    // This is required to switch the dropdown hiding method from a negative `left` value to `display: none`.
    if (('ontouchstart' in window || navigator.maxTouchPoints) && window.innerWidth > 767) {
      document.querySelectorAll('.site-header ul ul, .site-header-cart .widget_shopping_cart').forEach(function(element) {
        element.classList.add('sub-menu--is-touch-device');
      });
    }
  });

})();

Answer 1

尝试以此替换您的jQuery代码：

jQuery(document).ready(function($) {
  $(document).mouseup(function(e) {
    var $menuContainer = $('.menu');
    var $menu = $menu.find('ul');
    var $container = $('.site-navigation');
    var $button = $container.find('button')
    if (!$menuContainer.is(e.target) && $menuContainer.has(e.target).length === 0) {
      if ($container.hasClass('toggled')) {
        $button.attr('aria-expanded', false);
        $menu.attr('aria-expanded', false);
      }
    }
  });
});

它使用模板中的vanilla-js代码隐藏/显示菜单，但带有jQuery synthax。

关闭切换菜单无法与JQuery代码一起正常使用

1 个答案: