NuxtJS项目中Bootstrap导航菜单可正常展开但无法收起问题求助

• 调整Bootstrap JS加载时机
  不要全局提前引入Bootstrap JS资源，改为在Navbar组件的mounted（Vue2）/onMounted（Vue3）生命周期中仅在客户端侧加载，避免DOM未渲染完成就执行事件绑定导致逻辑异常，示例代码：

  // Vue3 + Nuxt3 写法
  onMounted(() => {
    if (process.client) {
      // 直接引入带popper的完整bootstrap js，避免依赖缺失
      import('bootstrap/dist/js/bootstrap.bundle.min.js')
    }
  })
  

• 手动管理折叠实例的生命周期
  不要依赖Bootstrap的自动初始化逻辑，主动实例化导航折叠对象，组件卸载时销毁实例清除事件绑定，避免路由切换后重复绑定导致点击触发两次逻辑（一次展开一次收起，表现为无法收起）：

  // Bootstrap 5 示例代码
  let navCollapseInstance = null
  onMounted(() => {
    if (process.client) {
      const collapseDom = document.querySelector('#导航折叠容器的ID')
      navCollapseInstance = new bootstrap.Collapse(collapseDom, {
        toggle: false // 关闭自动触发，保留默认点击逻辑
      })
    }
  })
  onBeforeUnmount(() => {
    // 组件销毁前清除实例和绑定的事件
    navCollapseInstance?.dispose()
  })
  

• 排查事件冒泡与样式冲突
  若导航切换按钮添加了Vue自定义点击事件，补充@click.stop修饰符阻止事件冒泡，避免和Bootstrap自带的点击事件冲突；同时排查全局CSS、组件scoped CSS是否覆盖了Bootstrap的.collapsing、.show等折叠相关类的样式，导致收起动画或状态切换失效。
• 排查SSR hydrate异常
  若使用SSR/SSG模式，用<client-only>标签包裹Navbar组件，确认是否是服务端渲染输出的DOM和客户端激活后的DOM不一致导致的事件绑定失效。

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