Vue3中无需jQuery如何编程式控制Bootstrap5折叠等组件

完全可以不用jQuery实现需求。Bootstrap 5 已经彻底移除了jQuery依赖，所有交互组件都提供了原生JavaScript编写的编程式控制API，调用时可以完整保留组件原生动画、无障碍属性同步等所有默认行为。

你之前手动添加/移除show类没有动画的原因很简单：Bootstrap折叠组件的过渡效果不是纯CSS实现，需要JS动态计算内容高度、控制过渡流程、绑定状态事件，直接修改class跳过了整套逻辑，自然无法触发动画。

具体实现 #

首先修正你原有代码的问题：ref需要绑定在带.collapse类的折叠内容容器上，而非触发按钮，Bootstrap的组件实例是和组件本身的容器绑定的，和触发元素无关。

完整可运行代码（选项式API，和你期望的调用逻辑对齐）：

<template>
  <button class="btn btn-primary" type="button" @click="toggleCollapse">
    Toggle to collapse
  </button>
  <!-- ref绑定在折叠内容容器上 -->
  <div ref="collapseRef" class="collapse" id="myCollapse">
    collapse content
  </div>
</template>

<script>
// 按需引入Collapse类，全量引入Bootstrap时可直接通过bootstrap.Collapse访问
import { Collapse } from 'bootstrap'

export default {
  name: "myCollapse",
  data() {
    return {
      collapseInstance: null
    }
  },
  mounted() {
    // 等DOM渲染完成后初始化折叠实例
    this.collapseInstance = new Collapse(this.$refs.collapseRef, {
      toggle: false // 初始化时不自动切换状态，保持默认收起
    })
  },
  beforeUnmount() {
    // 组件卸载时销毁实例，清除事件监听避免内存泄漏
    this.collapseInstance?.dispose()
  },
  methods: {
    toggleCollapse() {
      // 调用实例原生方法，动画效果和点击触发完全一致
      this.collapseInstance.toggle()
      // 其他可用方法：
      // this.collapseInstance.show() // 强制展开
      // this.collapseInstance.hide() // 强制收起
    }
  }
}
</script>

其他Bootstrap 5组件的通用性 #

这套实现逻辑完全适用于所有Bootstrap 5的交互组件，包括但不限于模态框（Modal）、侧边抽屉（Offcanvas）、下拉菜单（Dropdown）、轮播图（Carousel）、消息提示（Toast）、标签页（Tab）、提示气泡（Tooltip）、弹出框（Popover），使用流程完全统一：

• 从Bootstrap中引入对应组件的构造类
• 在DOM挂载完成后（mounted/onMounted钩子）拿到组件容器的DOM元素，通过new 组件类(元素, 配置项)初始化实例
• 调用实例提供的内置方法完成编程式控制
• 组件卸载前调用实例的dispose()方法销毁实例，避免内存泄漏

所有组件的实例方法都会完整保留原生交互、动画、无障碍属性（如aria-*属性）的自动同步，和通过data-bs-*属性触发的效果没有任何区别。

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