如何在单击项目时自动关闭 Bootstrap 响应式菜单？

Bootstrap：点击菜单项时自动关闭响应式菜单

在 Bootstrap 中显示响应式菜单时，您可能希望自动关闭菜单在移动或平板设备上单击菜单项，同时在桌面上保持打开状态后。

问题：

用户尝试使用 $('.btn -navbar').click();和 $('.nav-collapse').toggle();来实现此行为，但它导致菜单在桌面上意外缩小。

解决方案：

要解决此问题，请修改菜单项以包含 data-toggle和数据目标属性，就像使用导航栏切换按钮一样。例如，对于“产品”菜单项：

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

对每个菜单项重复此操作。

其他修复：

解决溢出问题和闪烁，添加以下代码：

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

这将使切换和目标选择器屏幕尺寸特定，消除较大菜单上的故障。

引导版本更新：

• Bootstrap v4.1.3 和 v5.0： 用 d-none d-sm-block 和 d-block d-sm 替换可见/隐藏类-none。
• Bootstrap v5: 将 data-toggle 替换为 data-bs-toggle，将 data-target 替换为 data-bs-target。

通过实现通过这些修改，您可以在单击菜单项时自动关闭响应式菜单，同时保持其在桌面设备上的功能。

以上是如何在单击项目时自动关闭 Bootstrap 响应式菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！