Twitter Bootstrap响应菜单/小设备：点击菜单项目的关闭/折叠菜单 [英] Twitter Bootstrap responsive menu/small devices: close/collapse menu on clicking a menu item

问题描述

我想在小型设备上更改Twitter Bootstrap菜单的行为，通过点击菜单项或单击菜单按钮关闭扩展菜单。目前（默认）我只能通过点击右上角的菜单按钮来折叠它，无论是否点击了链接/菜单项。我该怎么办？我无法从TB文件中找出结果，搜索互联网没有提供任何答案。

I want to change the behaviour of the Twitter Bootstrap Menu on small devices to close the expanded menu by either clicking on a menu item or clicking the menu button. Currently (default) I can only collapse it by clicking the menu button in the top right corner, no matter if I'd clicked on a link/menu item or not. How would I do that? I coudln't figure it out from the TB documentation and searching the internet didn't provide any answers.

推荐答案

感谢您的修复Skelly它在移动菜单上工作得很好，但不幸的是，它导致桌面模式的视觉缺陷，因为它是以.nav-collapse为目标，并且这个类在两种模式中都是活动的。所以，我做了一个修改：

Thanks for the fix Skelly. It worked great on the "mobile" menu, but unfortunately it was causing a visual defect in "desktop" mode as it was targeting .nav-collapse, and this class is active in both modes. So, I made a slight modification:

$('.nav li a').on('click',function(){
    $('.navbar-collapse.in').collapse('hide');
})

此修改仅在菜单处于移动模式时才调用隐藏功能。

This modification will only invoke the 'hide' functionality when the menu is in "mobile" mode.

注意：这只是在Bootstrap 3上测试。

Note: This is only tested on Bootstrap 3.

这篇关于Twitter Bootstrap响应菜单/小设备：点击菜单项目的关闭/折叠菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！