单击时关闭移动菜单？答案

【问题标题】：Close mobile menu on click?单击时关闭移动菜单？
【发布时间】：2014-02-27 16:46:47
【问题描述】：

我正在设计一个可以查看here 的响应式站点，并使用jQuery slimMenu 来提供一个在特定断点处初始化的可折叠导航菜单。我想在用户单击链接后强制菜单重新折叠，并且我正在尝试找出最好的方法。我找到了this StackOverflow thread，它通过建议创建一个额外的点击事件来提示菜单关闭来解决类似的问题。

因此，我想我可以将该函数包装在另一个函数中，以检查响应式菜单是否已被触发，如下所示：

// collapse slimmenu on click
$(window).resize(function(){    
    if ($(".menu-collapser").css("display") == "block" ){
        $(".nav").on("click", "li", function () {
        $(".collapse-button").click();
        });
    }
});

我的代码中显然存在某种错误，因为它在 Firefox 中创建了时髦的行为，导致折叠/响应式菜单在最终关闭之前折叠并打开几次，或者在 Chrome 中根本不关闭。我在这里做错了什么？还是有一种完全不同的方法来强制菜单在单击后关闭，这比这个更可取？感谢您在此处提供的任何帮助。

【问题讨论】：

标签： jquery jquery-plugins responsive-design

【解决方案1】：

$(window).resize() 非常敏感，因此不建议在 $(window).resize() 中设置事件监听器。因为事件监听器设置了很多次。

你应该在外面设置一次事件监听器，我就是这样做的，

// collapse slimmenu on click
$(window).resize(function(){    
    if ($(".menu-collapser").css("display") == "block" ){
        $(".nav").addClass("mobile");
    } else {
        $(".nav").removeClass("mobile")
    }
}).resize();

$("body").on("click", ".mobile li", function () {
  $(".collapse-button").click();
});

更新：对不起，我与你分享了错误的代码，如果你设置了 $(".mobile").on() 没有实际设置，因为移动端没有任何元素在初始化时间上课。

所以你应该处理 body click on(".mobile li") 这将解决问题。

还有一件事，不要忘记在 document.ready 上触发 resize 如果有人在手机中打开您的网站，则永远不会设置移动类，因为启动时没有 resize 事件。

【讨论】：

感谢您的回复；我正在尝试您的方法，但由于某种原因它似乎不起作用。我可以在 Firebug 中看到正在添加“移动”类，但点击功能似乎没有效果。我想知道我的 util.js 文件中是否还有其他问题？（我已经用你的代码更新了我的网站，所以可以看到。）
嗨 ocanal 我意识到另一个解决方案有问题，我正在尝试实施你的解决方案，但它仍然给我带来了问题。我希望您可以查看我上面的更新链接，看看可能导致问题的原因是什么？谢谢！
嗯，有道理；非常感谢，我会试一试。至于你关于 document.ready 的观点：我在这个网站上使用了一堆 jQuery 插件，我刚刚在我的 util.js 文件中的一个 jQuery 文档就绪函数中对所有初始化进行了分组——有什么问题吗？这种方法？再次感谢。
再次感谢 - 刚刚更新了网站，它运行良好！

【解决方案2】：

看来您的问题很容易解决。因为您的菜单在单击菜单后折叠，您无需检查任何内容。它是一个简单的绑定到 .nav 元素的 li 的事件。

$(".nav li").on("click", function(){
        $(".collapse-button").click();
    }
});

这当然是假设你的 click() 函数关闭

【讨论】：