JS汉堡菜单无法关闭问题求助：请帮忙排查代码故障

原代码存在的核心问题 #

• 选择器错误：最后一段的$('toggle')是无效类选择器（类选择器需加.），且监听对象逻辑错误——你需要监听的是菜单内的链接点击，而非汉堡按钮本身。
• ID选择器误用：$('#toggle')中toggle是类名而非ID，且全局选择器易引发多菜单场景下的冲突。
• 动态元素事件绑定失效：菜单元素是动态生成的，直接绑定事件无法触发，需用事件委托处理。
• 冗余逻辑：无需模拟汉堡按钮点击，直接移除菜单容器的active类即可关闭菜单。

修复后的代码 #

window.onload = function() {
    var buttons = $('#buttons01');
    buttons.each( function () {
        var t = $(this);
        t.find('li').addClass('x');
        // 插入汉堡切换按钮
        t.prepend('<li class="toggle"><a href="javascript:void(0);"><i class="fa fa-bars"></i></a></li>');
        
        var toggle = t.find('.toggle');
        // 简化汉堡按钮切换逻辑
        toggle.on("click", function() {
            t.toggleClass('active');
        });

        // 监听菜单内的链接点击，点击后关闭菜单
        t.on('click', 'li:not(.toggle) a', function() {
            t.removeClass('active');
        });
    });
}

修复说明 #

1. 统一逻辑上下文：把关闭菜单的逻辑整合到菜单初始化代码中，利用当前菜单容器t操作，避免全局选择器冲突。
2. 事件委托处理动态元素：通过t.on('click', 'li:not(.toggle) a', ...)绑定事件到静态父元素，确保动态生成的菜单链接能触发关闭逻辑，同时排除汉堡按钮自身的链接。
3. 简化切换逻辑：用toggleClass('active')替代手动判断类的添加/移除，代码更简洁高效。
4. 直接关闭菜单：点击链接后直接移除菜单容器的active类，一步完成关闭操作，无需绕路模拟按钮点击。

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