单击时关闭移动菜单. [英] Mobile menu closing on click.

问题描述

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

I've been using stackoverflow many times in the past to solve my coding problems, but this time I couldn't find the right answer, so I signed up and decided to ask the question myself.

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

TBH, I'm not very good when it comes to coding, I'm using my basic css, html and php knowledge to make some nice-looking wordpress sites for my friends.

我知道之前曾在此处问过上述问题，但我真的不知道如何将我能够找到的答案应用到我的案例中.

I know the question above has been asked on here before, but I really don't know how to apply the answers I was able to find to my case.

这是我现在正在处理的网站:http://serwer1652796.home.pl.

This is the website I'm working on right now: http://serwer1652796.home.pl.

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

I would like the mobile menu to close when someone clicks one of the links. I know that I will probably have to use some javascript code in one of the theme's files, but what exactly should I write and in which file? (I've never had to deal with js before, so please, be understanding.)

推荐答案

在theme.js文件中，第260行有这样的代码

In the theme.js file, on line 260 there is code that looks like this

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

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

In order to close the menu, you need to add some lines to toggle some CSS classes on various items that apparently control the visibility of the menu. It should look like this afterward

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.

I got the extra lines to add from the events that occur when you manually close the menu via the X icon, which can be found in theme.js on lines 7, 8 and 9.

这篇关于单击时关闭移动菜单.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！