单击时关闭移动菜单。

Question

过去我曾多次使用stackoverflow来解决我的编码问题，但这次我找不到正确的答案，所以我注册并决定自己提出问题。

TBH，我在编码方面不是很好，我正在使用我的基本 css、html 和 php 知识为我的朋友制作一些漂亮的 wordpress 网站。

我知道之前已经在这里问过上面的问题，但我真的不知道如何将我能够找到的答案应用到我的案例中。

这是我现在正在使用的网站： http : //serwer1652796.home.pl 。

当有人单击其中一个链接时，我希望移动菜单关闭。 我知道我可能不得不在主题文件之一中使用一些 javascript 代码，但是我到底应该写什么以及在哪个文件中？ （我以前从未处理过 js，所以请理解。）

Answer 1

在theme.js文件中，第 260 行的代码如下所示

jQuery('.home #site-navigation li a[href*=#]').on('click', function(event){
    event.preventDefault();
    smoothScroll(jQuery(this.hash));
});

为了关闭菜单，您需要添加一些行以在显然控制菜单可见性的各种项目上切换一些 CSS 类。 之后应该是这个样子

jQuery('.home #site-navigation li a[href*=#]').on('click', function(event){
    event.preventDefault();
    smoothScroll(jQuery(this.hash));
    jQuery('#nav-toggle').toggleClass('nav-is-visible');
    jQuery('.main-navigation .onepress-menu').toggleClass("onepress-menu-mobile");
    jQuery('.header-widget').toggleClass("header-widget-mobile");
});

我从通过X图标手动关闭菜单时发生的事件中添加了额外的行，可以在theme.js的第 7、8 和 9 行找到。

Answer 2

我看到您的主题正在使用 jquery。 您可以在 footer.php 文件中添加如下内容：

<script>
  $(".onepress-menu li a").on("click", function() {
    $(".onepress-menu").toggleClass("onepress-menu-mobile");
  });
</script>

您可以在此处看到模拟的效果：

提琴手