如何防止 Bootstrap 的可折叠菜单在单击链接后保持打开状态？

Bootstrap 菜单折叠：解决持久面板问题

在响应式网页设计领域，Bootstrap 的可折叠导航菜单一直是中流砥柱。然而，可能会出现一个特殊的问题：虽然菜单在较小的屏幕上优雅地折叠，但单击菜单链接无法将其收回。这可能会让用户陷入展开的菜单中，阻碍无缝导航。

揭晓解决方案：利用 JavaScript 的事件处理

解决这一困境的关键在于事件传播和有针对性的活动代表团。通过监听文档主体上的点击并检查目标元素是否是锚标记，我们可以仅在用户想要时以编程方式折叠菜单。这可以通过以下 JavaScript 代码优雅地实现：

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

解决潜在的子菜单干扰

使用子菜单时，上述代码可能会遇到微妙的陷阱。如果单击子菜单的切换元素，父菜单可能会无意中折叠。为了防止这种意外行为，需要改进代码版本：

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

通过从事件逻辑中排除下拉切换元素，我们确保单击子菜单按钮不会过早关闭主菜单。

支持动态导航

这个解决方案的美妙之处在于它的动态性质。事件侦听器绑定到整个文档，因此即使添加或删除菜单链接，折叠行为也将保持不变。这种适应性保证了静态网页和自适应网页上的无缝导航。

以上是如何防止 Bootstrap 的可折叠菜单在单击链接后保持打开状态？的详细内容。更多信息请关注PHP中文网其他相关文章！