求助：Bootstrap导航栏切换按钮点击不关闭及展开方向异常

我完全懂你的困扰——官方让你转Angular实在没必要，用jQuery就能轻松搞定这个问题，毕竟你之前用原生Bootstrap都不需要额外框架。

问题根源在于MDBootstrap的Navbar组件默认没有给导航项绑定点击关闭折叠菜单的事件，而原生Bootstrap是自带这个行为的。我们只需要手动用jQuery补上这个逻辑就行：

具体实现代码 #

$(document).ready(function() {
  // 选中所有导航栏里的可点击链接
  $('.navbar-nav .nav-link').on('click', function() {
    // 替换成你页面中折叠菜单的容器选择器（比如ID或类）
    const $collapseMenu = $('.navbar-collapse');
    
    // 只有当菜单处于展开状态时，才执行收起操作
    if ($collapseMenu.hasClass('show')) {
      $collapseMenu.collapse('hide');
    }
  });
});

注意事项 #

• 确保你的选择器和实际HTML结构匹配：如果你的折叠菜单用的是ID（比如#navbarSupportedContent），就把.navbar-collapse换成对应的ID选择器#navbarSupportedContent
• 这段代码要放在jQuery加载完成之后执行，$(document).ready()能保证页面元素都加载完毕后再绑定事件
• 不需要引入Angular，也不会和jQuery冲突，完全符合你现有技术栈的需求

内容的提问来源于stack exchange，提问作者Alexandra