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

gfa*_*faw 5 menu menuitem collapse twitter-bootstrap drop-down-menu

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

小智 7

谢谢你修复Skelly.它在"移动"菜单上运行得很好,但遗憾的是它导致了"桌面"模式的视觉缺陷,因为它的目标是.nav-collapse,并且这个类在两种模式下都是活动的.所以,我稍作修改:

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

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

注意:这仅在Bootstrap 3上测试.


Zim*_*Zim 6

你可以试试像..

$('.nav li a').on('click',function(){
    $('.nav-collapse').collapse('hide');
})
Run Code Online (Sandbox Code Playgroud)

这适用于引用"#"的菜单链接.如果您的菜单链接导航到网站上的另一个页面,则菜单应该已经折叠,因为这会导致整页刷新.