Bootstrap关闭响应式菜单“单击”

Question

在“产品”上，点击我将白色div向上滑动（如附件所示）。在响应式（移动设备和平板电脑）中，我想自动关闭响应式导航栏，仅显示白色栏。

我试过了：

$('.btn-navbar').click();  

还尝试了：

$('.nav-collapse').toggle();

它确实有效。但是，在桌面大小上，它也被称为“菜单”，并在菜单上缩小了一秒钟。

有任何想法吗？

Answer 1

我已将其与动画配合使用！HTML中的菜单：<div id="nav-main" class="nav-collapse collapse">&nbsp; &nbsp; &nbsp;<ul class="nav">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href='#somewhere'>Somewhere</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>&nbsp; &nbsp; &nbsp;</ul>&nbsp;</div>将导航中所有元素上的click事件绑定到折叠菜单（Bootstrap折叠插件）：&nbsp;$(function(){&nbsp;&nbsp; &nbsp; &nbsp;var navMain = $("#nav-main");&nbsp; &nbsp; &nbsp;navMain.on("click", "a", null, function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;navMain.collapse('hide');&nbsp; &nbsp; &nbsp;});&nbsp;});编辑 为了使其更通用，我们可以使用以下代码片段&nbsp;$(function(){&nbsp;&nbsp; &nbsp; &nbsp;var navMain = $(".navbar-collapse"); // avoid dependency on #id&nbsp; &nbsp; &nbsp;// "a:not([data-toggle])" - to avoid issues caused&nbsp; &nbsp; &nbsp;// when you have dropdown inside navbar&nbsp; &nbsp; &nbsp;navMain.on("click", "a:not([data-toggle])", null, function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;navMain.collapse('hide');&nbsp; &nbsp; &nbsp;});&nbsp;});