Semantic UI 下拉组件在 Bootstrap 5 环境下初始化失效抛出classList错误

问题根因 #

核心冲突来自两套组件库的下拉实现机制不兼容，仅调整局部脚本顺序无法覆盖所有冲突点，具体逻辑矛盾点如下：

• Bootstrap 5 全面移除对jQuery的强依赖，改用原生JS实现全局事件委托：脚本加载完成后会立即扫描全页DOM，自动给所有原生<select>元素、带data-bs-toggle="dropdown"属性的元素绑定原生下拉交互逻辑
• Semantic UI 下拉组件初始化时，会将原生<select>元素视觉隐藏，动态生成一套独立的下拉DOM结构替代原元素完成交互
• 触发点击操作时优先执行Bootstrap绑定的事件：Bootstrap按照自身约定的DOM层级查找关联的下拉面板节点，由于DOM已经被Semantic替换为不符合Bootstrap规范的结构，最终找不到预期的节点引用，直接访问undefined对象的classList属性抛出类型错误，后续Semantic的下拉初始化逻辑被异常中断，完全失效。

可落地修复步骤 #

• 调整全局脚本加载顺序，将Semantic UI相关脚本移动到Bootstrap 5 核心脚本之前加载，让Semantic抢先完成下拉元素的DOM替换和事件绑定，避免被Bootstrap的自动初始化逻辑抢占事件
• 对需要使用Semantic实现下拉的元素，不要添加data-bs-toggle="dropdown"这类Bootstrap专属的下拉标识，避免被Bootstrap的扫描逻辑误捕获
• 同步调整依赖Bootstrap的第三方脚本（如引入的bmd.js、bs-init.js）的加载顺序，将这类脚本移动到Semantic UI脚本之后加载，避免提前绑定存在冲突的交互逻辑
• 完成顺序调整后，手动执行$('.ui.dropdown').dropdown()初始化下拉组件，验证控制台无报错、展开/收起交互正常即可。

内容的提问来源于stack exchange，提问作者OBI PASCAL BANJUARE