为什么我的 Bootstrap 3 折叠导航在单击菜单链接后仍保持打开状态？

单击菜单链接后，Bootstrap 3 的折叠导航保持打开状态

在典型的 Bootstrap 3 导航设置中，单击折叠菜单中的菜单链接应导致菜单自动关闭。然而，一些用户遇到了选择菜单链接后菜单保持打开状态的问题。

理解问题

出现此问题是因为 Bootstrap 崩溃的默认行为插件的作用是在单击触发按钮时切换元素的可见性。这意味着单击折叠菜单本身（包括菜单链接）不会触发折叠操作。

解决方案

为了解决此问题，需要使用 JavaScript 事件侦听器可以添加到文档中。此侦听器会检测用户何时在折叠的导航中单击并自动隐藏它。下面是示例代码：

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});

解释

• $(document).on 将事件监听器绑定到文档，以单击与选择器匹配的元素.navbar-collapse.in。这确保了仅当导航折叠时才触发该事件。
• if 条件检查单击的元素（e.target）是否是锚点 ；不是下拉切换的标记（“.dropdown-toggle”）。排除下拉开关，以防止在访问其子菜单时折叠菜单。
• 如果满足条件，则会在单击的元素上调用折叠（'hide'）方法，这会折叠导航。

此解决方案可确保当用户单击菜单链接时折叠菜单自动关闭，从而提供无缝且用户友好的导航体验。

以上是为什么我的 Bootstrap 3 折叠导航在单击菜单链接后仍保持打开状态？的详细内容。更多信息请关注PHP中文网其他相关文章！