我有一个问题,我想它很简单,但我无法自己解决。我正在使用 WordPress 和 Pistis 模板设计一个单页网站。
问题是菜单被预定义为汉堡菜单,当它被点击时,整个页面变成灰色,中间出现一个大菜单。我会张贴图片,以便您更好地理解它。
我想要发生的是,当您单击任何菜单元素(链接)时,整个菜单都会消失,显示网站就像之前有人单击汉堡图标显示菜单一样。由于它是单页,因此单击时不会加载不同的页面,它只是移动到页面的适当部分。如果我只能添加一些 CSS 怎么办?
最佳答案
在我们做任何事情之前,请注意,如果您的主题得到更新,此更改将被覆盖。创建一个子主题并在那里进行更改可能是个好主意(尽管看起来原始主题已经修改了不少。)
除此之外,您需要编辑的文件可在单击任何链接时自动关闭菜单,该文件位于此处:/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(){
这样就可以了。
请记住清除/硬刷新浏览器的缓存,以便它获取此更改。
关于css - 当我点击一个链接时,如何使这个菜单在 Wordpress 上消失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56435556/