首页 >web前端 >css教程 >为什么我的 Bootstrap 3 折叠菜单在单击链接后仍保持打开状态?

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

Patricia Arquette
Patricia Arquette原创
2024-11-14 10:51:02709浏览

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn