汉堡按钮切换is-active类后，关联元素无法恢复显示的问题求助

我明白你的问题所在了——你现在的代码只在页面首次加载时检查一次汉堡菜单的is-active类状态，之后点击切换菜单时，并没有重新执行显示/隐藏购物车的逻辑，所以移除is-active类后购物车不会自动恢复显示，必须刷新页面。

咱们直接把购物车的显示控制逻辑放到汉堡按钮的点击事件里，这样每次点击都能实时响应状态变化：

优化后的完整JS代码 #

document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
        $('.hamburger').click(function(){
            // 先切换汉堡菜单的active类
            const $hamburgerMenu = $('.hamburger--slider');
            $hamburgerMenu.toggleClass('is-active');
            
            // 根据当前active类的状态，控制购物车的显示/隐藏
            if ($hamburgerMenu.hasClass('is-active')) {
                $('.rey-headerCart-wrapper').hide();
            } else {
                $('.rey-headerCart-wrapper').show();
            }
        });
    });
});

更简洁的写法（用toggle()方法） #

如果想让代码更紧凑，可以用jQuery的toggle()方法，它接受一个布尔值参数来决定元素是否显示：

document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
        $('.hamburger').click(function(){
            const $hamburgerMenu = $('.hamburger--slider');
            $hamburgerMenu.toggleClass('is-active');
            
            // 当汉堡菜单没有is-active类时显示购物车，反之隐藏
            $('.rey-headerCart-wrapper').toggle(!$hamburgerMenu.hasClass('is-active'));
        });
    });
});

为什么原来的代码不行？ #

你之前的代码是在DOM就绪时执行一次判断：

jQuery(function($) {
    if ($('.hamburger--slider.is-active').length) {
        $('.rey-headerCart-wrapper').hide();
    }
});

这段代码只会在页面加载完成后运行一次，之后点击汉堡按钮切换is-active类时，它不会再次执行，所以购物车的状态不会跟着更新。把逻辑放到点击事件里，就能保证每次菜单状态变化时，购物车的显示状态也会同步更新啦。

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