单击项目时关闭移动菜单（elementor kit、wordpress）

Question

我似乎找不到这个问题的答案。我已经尝试了这个论坛上的一些答案，但它不起作用。如果我在移动视图上并单击带有“#”作为链接的菜单项。菜单不关闭。这是我正在尝试的网站。我希望有人知道这个问题。 www.cfxsquad.nl/verge/

Answer 1

问题不够详细，无法准确理解菜单中的哪个项目不起作用以及您想要实现什么，但我认为是 CASES 链接导致了问题。它根本不包含 `href="..."，所以这就是它不响应点击的原因。

其下方的其他内容正确包括

<a href="#" ...

。要使其正常工作，您应该包含

a href="#"

，然后将

#

更改为 WordPress 格式的常规网址：

<a href="<?php bloginfo('url'); ?>/link-to-the-page">CASES</a>

Answer 2

当您使链接正常工作时，移动菜单将自动消失 - 单击链接将重新加载页面，菜单将消失，直到您下次单击打开图标时。

如果您想要更精美的菜单动画撤退，您可以尝试

mainMenu.addEventListener('click', closeMenu(e))

类型的 JavaScript 单击处理程序，针对整个菜单区域或每个单独的链接项。

然后将该处理程序附加到已经存在的切换菜单 JavaScript（我无法在您的站点中找到实际的代码，结构很难掌握，我只找到了二十七个主题）。您可以通过将

closeMenu(e)

替换为从汉堡菜单切换菜单的函数名称来实现此目的。确保在主题的原始脚本之后加载新的 JS。

如果您无法使用原始的切换动画，则必须首先创建一个 css 动画，然后在单击菜单/链接时使用 javascript 将该 css 类动态添加到 #main-menu 元素。想象一下，您已经在上面声明了

mainMenu

变量，并在样式表中创建了

animate-close

css 类（保持菜单打开的 css 类称为

open

:

    const closeMenu(e) => {

      // e.preventDefault() -- only if you don't want the 
      // link clicks to work/send you along to the next page

      // Now close that darn menu:
      if (mainMenu.classList.contains('open') {
        mainMenu.classList.add('animate-close')
        mainMenu.classList.remove('open')
      }
    }

Answer 3

当然，这是消息的翻译：

当我在页面上创建锚链接时，我遇到了同样的问题。我用 JavaScript 解决了这个问题，点击菜单的“X”关闭按钮。将以下 JavaScript 添加到页面的页脚：

<script>
// close mobile menu on anchor click
document.addEventListener('DOMContentLoaded', function() {
    var menuCloseButton = document.querySelector('.elementskit-menu-close');
    var menuLinks = document.querySelectorAll('.elementskit-menu-container a[href*="#"]');

    menuLinks.forEach(function(link) {
        link.addEventListener('click', function() {
            if (menuCloseButton) {
                menuCloseButton.click(); // Simula um clique no botão de fechar para fechar o menu
            }
        });
    });
});
</script>