单击时关闭移动菜单。答案

【问题标题】：Mobile menu closing on click.单击时关闭移动菜单。
【发布时间】：2016-06-09 17:48:09
【问题描述】：

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

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

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

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

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

【问题讨论】：

你能添加一些代码吗？
我不确定，但这里是我在 .js 文件中找到的与菜单相关的行。 1. bootstrap.js s33.postimg.org/xpm0oaxan/… 2. theme.js s33.postimg.org/9zjpx4snj/…

标签： javascript css wordpress twitter-bootstrap

【解决方案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 图标手动关闭菜单时，我从发生的事件中添加了额外的行，该图标可以在第 7、8 和 9 行的 theme.js 中找到。

【讨论】：

【解决方案2】：

我看到你的主题是使用 jquery。您可以在 footer.php 文件中添加类似这样的内容：

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

你可以在这里看到模拟的效果：

jsfiddle

【讨论】：