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

bxpogfeg 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(216)

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

3条答案

感谢Skelly的修复。它在“移动的”菜单上运行得很好，但不幸的是，它在“桌面”模式下造成了视觉缺陷，因为它是针对.nav-collapse的，而这个类在两种模式下都是活动的。所以，我做了一个小小的修改：

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

此修改将仅在菜单处于“移动的”模式时调用“隐藏”功能。
注：仅在Bootstrap 3上进行测试。

你可以试试...

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

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

您可以使用HTML来实现，将data-toggle="collapse" data-target=".in"添加到锚
示例：

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