单击时使导航栏折叠/关闭

Posted 2023-04-13

【中文标题】单击时使导航栏折叠/关闭

【英文标题】：Make navbar collapse/close on click

【发布时间】：2018-06-04 16:39:03

【问题描述】：

我无法让移动设备上的导航栏与我的网站一起崩溃。问题仅涉及网站的移动版本。

当我单击菜单按钮时，站点滚动到正确的位置，但导航栏仍然打开，这很烦人。我试图为 UL LI 元素提供与导航栏中的“后退”按钮相同的类，它可以折叠导航栏，但这不起作用：/.. 谁能告诉我如何在单击菜单项时关闭导航栏？

这是网站：

非常感谢

【问题讨论】：

***.com/questions/21203111/…

尝试了解决方案： data-toggle="collapse" data-target=".navbar-collapse" .. 侧边栏现在折叠，但是当我单击菜单按钮时它不再打开： /

它实际上甚至比不打开更奇怪......所以这并不能完全解决我的问题

Bootstrap 3 collapsed menu doesn't close on click的可能重复

【参考方案1】：

你可以用 jQuery 来解决它，只需触发点击菜单图标的动作，就像这样：

jQuery('.rd-navbar-nav li').click(function() 
  jQuery('.rd-navbar-toggle').trigger('click');
);

这样，当您单击菜单中的某个元素时，它也会模拟单击汉堡菜单图标。

【参考方案2】：

如果您愿意，可以使用 Jquery，但我只是在我的网站上使用 javascript。您可以查看如何使用 JavaScript here 制作可折叠的导航栏菜单。如果您想在单击菜单项时关闭菜单栏，只需在菜单处于活动状态并打开时在 onClick() 属性中设置 close() 函数。 close() 函数将是您再次隐藏菜单的函数。

编辑：您必须在 JavaScript 中定义 close() 函数并将其设置为隐藏菜单项。