当我单击链接时,如何使该菜单在Wordpress上消失?

时间:2019-06-03 23:09:30

标签: css wordpress templates menu hide

我有一个问题,我想这很简单,但我自己无法解决。我正在使用WordPress和Pistis模板设计一个单页网站。

问题是该菜单已预定义为汉堡菜单,单击该菜单时,整个页面将变成灰色,并且大菜单出现在中间。我将发布图片,以便您更好地理解。

1

我想发生的是,当您单击任何菜单元素(链接)时,整个菜单消失了,显示的网站就像以前任何人都在单击汉堡图标时显示菜单一样。由于是单页,因此单击时不会加载其他页面,而只是移至页面的适当部分。如果我只能添加一些CSS,该怎么办?

1 个答案:

答案 0 :(得分: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(){

那应该做到的。

请记住要清除/硬刷新浏览器的缓存,以便它能够接受这一更改。