Twitter Bootstrap响应式菜单/小型设备：单击菜单项时关闭/折叠菜单

Question

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

Answer 1

感谢修复Skelly。它在“移动”菜单上运行得很好，但遗憾的是它导致了“桌面”模式的视觉缺陷，因为它的目标是.nav-collapse，并且这个类在两种模式下都是活动的。所以，我做了一些修改：

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

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

注意：这仅在Bootstrap 3上进行测试。

Answer 2

你可以试试像..

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

这适用于引用“＃”的菜单链接。如果您的菜单链接导航到网站上的其他页面，则菜单应该已经折叠，因为这会导致整页刷新。

Answer 3

您可以使用HTML执行此操作，将data-toggle="collapse" data-target=".in"添加到锚点

示例：

<li><a href="#" data-toggle="collapse" data-target=".in">Link</a></li>