如何在WordPress移动端菜单中集成汉堡菜单切换动画？

AI 小北

2026-7-20

解决WordPress移动端汉堡菜单无法关闭的问题

问题描述

我想给WordPress网站的移动端菜单集成汉堡菜单切换动画，之前参考的教程里用了两个独立的“打开”和“关闭”图标。现在我已经有了汉堡菜单，但搞不懂toggle功能的原理，菜单能打开但关不上，以下是我目前的全屏菜单代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var $ = jQuery
    leavePage = false

var placeImages = function(){
    
$('.f-menu .elementor-icon-list-item').each(function(i){
    
    var offset = 20, 
        x = $(this).find('.elementor-icon-list-text').width() + offset,
        y = $(this).offset().top - $('.f-menu .elementor-icon-list-item').eq(0).offset().top
        
    console.log($(window).width())
        
    if( $(window).width() < 768 ) { x = 0 }
    
    $('.menu-image .elementor-gallery-item').eq(i).css('transform', 'translate(' + x + 'px,' + y + 'px)')
    
    $('.menu-image').css('top', $('.f-menu .elementor-icon-list-item').eq(0).offset().top - $('.f-menu-section').offset().top)
})
}


$(document).ready(function(){
    
placeImages()

var menuStart = 0.8;
    menuDiff = 0.1;

$('.f-menu-section .elementor-icon-list-item').each(function(){
    
    $(this).css('transition-delay', menuStart + 's')
    menuStart += menuDiff
})

var menuHovered = false

$('.f-menu .elementor-icon-list-item').hover(function(){
    
    var i = $(this).index()
   $('.menu-image .elementor-gallery-item').eq(i).addClass('active')
   $('.menu-image').css('z-index', 1)
   menuHovered = true
}, function(){
    $('.menu-image .elementor-gallery-item').removeClass('active')
    menuHovered = false
    setTimeout(function(){
        if(menuHovered) return
        $('.menu-image').css('z-index', -1)
        
    },300)
})

$('.f-open').on('click', function(){
    $('.f-menu-section').addClass('active')
})

$('.f-close').on('click', function(){
    $('.f-menu-section').removeClass('active')
})


$('.f-menu-section .elementor-icon-list-item a').on('click', function(){
    
    setTimeout(function(){
        if(leavePage) return
        $('.f-menu-section').addClass('faded')
        setTimeout(function(){
            $('.f-menu-section').removeClass('active')
        },200)
        setTimeout(function(){
            $('.f-menu-section').removeClass('faded')
        },1000+200)
    },50)
})

})

window.onbeforeunload = () => {
    leavePage = true
    
}

$(window).on('load resize', placeImages)

</script>

问题分析与解决方案

你的代码里用两个独立按钮（.f-open和.f-close）分别控制菜单显示隐藏，但问题大概率出在按钮的显示逻辑或事件绑定完整性上——比如菜单打开后.f-close未正确显示，或者点击事件未生效。

1. Toggle功能核心原理

Toggle本质是切换元素状态：点击一次添加类（如active），再点击一次移除该类。有两种实现方式：

用jQuery的toggleClass()直接切换菜单的active类
用单个按钮，点击时同时切换自身图标（汉堡→叉号）和菜单状态

2. 代码修改方案（两种可选）

方案一：修复独立按钮逻辑

先添加CSS控制按钮显示隐藏（放入你的样式表）：

.f-close {
    display: none; /* 默认隐藏关闭按钮 */
}
/* 根据你的HTML结构调整选择器，确保菜单激活时显示关闭按钮 */
.f-menu-section.active + .f-close {
    display: block;
}
.f-open.active {
    display: none; /* 菜单激活时隐藏汉堡按钮 */
}

再修改JavaScript点击事件：

// 替换原有的.f-open和.f-close点击事件
$('.f-open').on('click', function(){
    $('.f-menu-section').addClass('active');
    $(this).addClass('active'); // 标记汉堡按钮为激活状态
});

$('.f-close').on('click', function(){
    $('.f-menu-section').removeClass('active');
    $('.f-open').removeClass('active'); // 重置汉堡按钮状态
});

方案二：单个按钮实现Toggle（更简洁）

调整HTML结构，将汉堡和关闭图标放在同一容器：

<button class="menu-toggle">
    <span class="hamburger-icon">☰</span>
    <span class="close-icon">×</span>
</button>

添加CSS控制图标切换：

.menu-toggle .close-icon {
    display: none;
}
.menu-toggle.active .hamburger-icon {
    display: none;
}
.menu-toggle.active .close-icon {
    display: block;
}

修改JavaScript逻辑：

// 替换原有的.f-open和.f-close点击事件
$('.menu-toggle').on('click', function(){
    $(this).toggleClass('active'); // 切换按钮自身状态
    $('.f-menu-section').toggleClass('active'); // 切换菜单状态
});

3. 确保菜单显示/隐藏的CSS逻辑

检查.f-menu-section的CSS是否正确控制状态：

.f-menu-section {
    position: fixed;
    top: 0;
    left: -100%; /* 初始隐藏在左侧 */
    width: 100%;
    height: 100vh;
    transition: left 0.3s ease;
}
.f-menu-section.active {
    left: 0; /* 激活时显示 */
}

修改后的完整JavaScript代码（方案一）

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var $ = jQuery
    leavePage = false

var placeImages = function(){
    
$('.f-menu .elementor-icon-list-item').each(function(i){
    
    var offset = 20, 
        x = $(this).find('.elementor-icon-list-text').width() + offset,
        y = $(this).offset().top - $('.f-menu .elementor-icon-list-item').eq(0).offset().top
        
    console.log($(window).width())
        
    if( $(window).width() < 768 ) { x = 0 }
    
    $('.menu-image .elementor-gallery-item').eq(i).css('transform', 'translate(' + x + 'px,' + y + 'px)')
    
    $('.menu-image').css('top', $('.f-menu .elementor-icon-list-item').eq(0).offset().top - $('.f-menu-section').offset().top)
})
}


$(document).ready(function(){
    
placeImages()

var menuStart = 0.8;
    menuDiff = 0.1;

$('.f-menu-section .elementor-icon-list-item').each(function(){
    
    $(this).css('transition-delay', menuStart + 's')
    menuStart += menuDiff
})

var menuHovered = false

$('.f-menu .elementor-icon-list-item').hover(function(){
    
    var i = $(this).index()
   $('.menu-image .elementor-gallery-item').eq(i).addClass('active')
   $('.menu-image').css('z-index', 1)
   menuHovered = true
}, function(){
    $('.menu-image .elementor-gallery-item').removeClass('active')
    menuHovered = false
    setTimeout(function(){
        if(menuHovered) return
        $('.menu-image').css('z-index', -1)
        
    },300)
})

// 修改后的切换逻辑
$('.f-open').on('click', function(){
    $('.f-menu-section').addClass('active');
    $(this).addClass('active');
});

$('.f-close').on('click', function(){
    $('.f-menu-section').removeClass('active');
    $('.f-open').removeClass('active');
});


$('.f-menu-section .elementor-icon-list-item a').on('click', function(){
    
    setTimeout(function(){
        if(leavePage) return
        $('.f-menu-section').addClass('faded')
        setTimeout(function(){
            $('.f-menu-section').removeClass('active')
            $('.f-open').removeClass('active'); // 点击菜单链接后重置按钮状态
        },200)
        setTimeout(function(){
            $('.f-menu-section').removeClass('faded')
        },1200)
    },50)
})

})

window.onbeforeunload = () => {
    leavePage = true
    
}

$(window).on('load resize', placeImages)

</script>

内容的提问来源于stack exchange，提问作者Victor