如何在点击时关闭 Bootstrap 响应式菜单？

单击时关闭 Bootstrap 响应式菜单

在移动设备上查看网站时，使用导航菜单通常很麻烦。为了增强用户体验，希望在单击菜单项时自动关闭响应式导航栏，仅显示所需的内容。

但是，应用 $('.btn-navbar').click( ) 或 $('.nav-collapse').toggle() 可能会对桌面视图产生不良影响，例如菜单短暂收缩。要获得更有效的解决方案，请考虑以下措施：

使用数据属性选择器

要指定响应式菜单应在单击菜单项时关闭，请添加 data-toggle="collapse" 和data-target=".navbar-collapse" 属性到相应的 元素，如下所示例如：

<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 版本更新

对于 Bootstrap v4.1.3 和 v5.0，可见/隐藏类必须替换为 d-none/d-sm-block 和 d-block分别为 /d-sm-none。

在 Bootstrap v5 中，替换 data-toggle 和 data-target属性分别为 data-bs-toggle 和 data-bs-target。

通过遵循这些准则，您可以确保响应式 Bootstrap 导航菜单在单击菜单项时自动关闭，从而提供增强的用户体验。

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