能否动态将元素的data-toggle="dropdown"替换为data-bs-toggle="dropdown"？

可以通过JavaScript直接操作DOM批量修改属性，以下是几种实用方案：

原生JavaScript方案（无依赖） #

如果项目没引入jQuery，用原生JS就能搞定：

// 选中所有带有data-toggle="dropdown"的元素
const dropdownElements = document.querySelectorAll('[data-toggle="dropdown"]');

// 遍历处理每个元素
dropdownElements.forEach(element => {
  // 添加Bootstrap 5兼容的新属性
  element.setAttribute('data-bs-toggle', 'dropdown');
  // 移除旧属性
  element.removeAttribute('data-toggle');
});

jQuery方案（适合已引入jQuery的项目） #

如果项目里已经在用jQuery，代码可以更简洁：

// 链式调用完成属性替换
$('[data-toggle="dropdown"]').attr('data-bs-toggle', 'dropdown').removeAttr('data-toggle');

处理动态生成的元素 #

如果下拉元素是异步加载（比如AJAX渲染）的，上面的代码只会处理初始DOM里的元素。这种情况可以用MutationObserver监听DOM变化，自动处理新添加的元素：

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 检查是否有新增节点
    if (mutation.addedNodes.length > 0) {
      // 对新增节点里的目标元素做属性替换
      document.querySelectorAll('[data-toggle="dropdown"]').forEach(el => {
        el.setAttribute('data-bs-toggle', 'dropdown');
        el.removeAttribute('data-toggle');
      });
    }
  });
});

// 配置监听范围：监听body下所有子节点变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

注意事项 #

• 代码要在DOM加载完成后执行：可以把代码放在DOMContentLoaded事件回调里，或者直接放在页面底部</body>标签之前，确保能选中目标元素。
• 如果只需要处理特定区域的元素，可把document换成对应容器元素（比如document.getElementById('target-container')），提升性能。

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