当我点击 link 时，如何让这个菜单在 Wordpress 上消失？

Question

我有一个问题，我觉得很简单，但我自己解决不了。我正在使用 WordPress 和 Pistis 模板设计一个单页网站。

问题是菜单被预定义为汉堡菜单，当它被点击时，整个页面变成灰色，中间出现一个大菜单。我会 post 一张图片，让你更好地理解它。

我想要发生的是，当您单击任何菜单元素 (link) 时，整个菜单都会消失，显示网站就像之前有人单击汉堡图标显示菜单一样。由于它是单页，因此单击时不会加载不同的页面，它只是移动到页面的适当部分。只能加点CSS怎么办？

Answer 1

在我们做任何事情之前，请注意，如果您的主题得到更新，此更改将被覆盖。创建一个子主题并在那里进行更改可能是个好主意（尽管看起来原始主题已经修改了不少。）

除此之外，单击任何链接时需要编辑以使菜单自动关闭的文件位于此处：/wp-content/themes/pistis/menu.js。这是处理菜单的代码：

//open/close primary navigation
$('.cd-primary-nav-trigger').on('click', function(){
    $('.cd-menu-icon').toggleClass('is-clicked'); 
    $('.cd-header').toggleClass('menu-is-open');

    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
    if( $('.cd-primary-nav').hasClass('is-visible') ) {
        $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').removeClass('overflow-hidden');
        });
    } else {
        $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').addClass('overflow-hidden');
        }); 
    }
});

$('.menu-item-2539 a').on('click', function(){
    $('.cd-menu-icon').toggleClass('is-clicked'); 
    $('.cd-header').toggleClass('menu-is-open');

    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
    if( $('.cd-primary-nav').hasClass('is-visible') ) {
        $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').removeClass('overflow-hidden');
        });
    } else {
        $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').addClass('overflow-hidden');
        }); 
    }
});

变化：

$('.menu-item-2539 a').on('click', function(){

进入：

$('.menu-item a').on('click', function(){

应该就可以了。

记得 clear/hard-refresh 浏览器的缓存，以便它获取此更改。

当我点击 link 时，如何让这个菜单在 Wordpress 上消失？

How to make disappear this menu on Wordpress when I click a link?

css

wordpress

templates

menu

hide