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图标位于1第7,8和9行。

Answer 2

我看到你的主题是使用jquery。你可以在footer.php文件中添加这样的东西：

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

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

jsfiddle

点击后移动菜单关闭。

2 个答案: