为什么我的 Bootstrap 3 折叠菜单在单击链接后仍保持打开状态？-css教程-PHP中文网

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

Patricia Arquette

发布： 2024-11-14 10:51:02

原创

700 人浏览过

Why Does My Bootstrap 3 Collapsed Menu Stay Open After Clicking a Link?

Bootstrap 3：解决持续存在的折叠菜单问题

问题：

在 Bootstrap 3 导航中，折叠菜单单击菜单链接后仍保持打开状态，破坏了用户体验。

答案：

要解决此问题，请实现以下代码：

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

登录后复制

详细信息：

此解决方案将事件侦听器绑定到文档，以监视展开的导航菜单中的点击（类：“.navbar-collapse.in”）。
当点击菜单链接（“a”元素）时，行 $(this).collapse('hide');触发导航菜单的折叠。

更新[2014-11-04]：

对于带有子菜单的导航，修改代码为:

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

登录后复制

此修改确保只有非下拉切换的菜单链接才会触发菜单折叠。

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