DOM操作生成的Bootstrap下拉菜单第二次点击不显示问题

• 资源冲突：同时引入了Bootstrap4、Bootstrap5两个版本的样式和脚本，以及两个不同版本的Popper.js，不同版本的Bootstrap下拉菜单API不兼容，导致二次触发失效。
• 旧节点清理逻辑错误：使用childNodes[2]定位要删除的旧下拉列表，childNodes包含文本、注释等非元素节点，多次操作后节点顺序变化，会出现删错节点、旧节点残留的问题。
• 下拉实例未同步更新：Bootstrap下拉菜单的实例会在DOM加载完成后自动初始化，你动态替换ul元素后，旧实例绑定的还是被删除的旧节点，新插入的ul没有和下拉实例关联，无法触发显示。
• 代码细节错误：下拉列表的aria-labelledby属性值和按钮ID不匹配，判断files是否为空的逻辑有误。

1. 清理重复引入的资源，仅保留单版本Bootstrap依赖，Bootstrap5的bootstrap.bundle.min.js已经内置Popper.js，无需额外引入：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

2. 修改add_pvt_dropdown函数，修正节点清理逻辑、空值判断、属性配置，动态更新后重置下拉实例：

function add_pvt_dropdown(files) {
  const dropdown_div = document.getElementById("pvt_list_dropdown");
  // 直接查找已存在的下拉列表元素删除，避免节点顺序问题
  const oldUl = document.getElementById("pvt_option");
  if (oldUl) oldUl.remove();

  const UL = document.createElement("ul"); 

  // 修正空值判断逻辑
  if (typeof files === 'undefined' || files == null) {
    alert("choose something")
  } else {
      UL.setAttribute("class", "dropdown-menu");
      UL.setAttribute("id", "pvt_option");
      // 修正aria-labelledby为按钮实际ID
      UL.setAttribute("aria-labelledby", "dropdownMenuButtonPvt");
      files.forEach(val => {
        if (val.includes('CSV_')) {
          const li = document.createElement('li');
          const a = document.createElement('a');  
          
          a.setAttribute('class', "dropdown-item")
          a.setAttribute('id', val)
          a.textContent = val;
          li.appendChild(a);
          UL.appendChild(li);
          console.log(a.textContent)
        }
      });

      dropdown_div.appendChild(UL);
      // 重置下拉菜单实例，让新插入的ul生效
      const dropdownBtn = document.getElementById('dropdownMenuButtonPvt');
      const oldDropdown = bootstrap.Dropdown.getInstance(dropdownBtn);
      if (oldDropdown) oldDropdown.dispose();
      new bootstrap.Dropdown(dropdownBtn);
  }
}

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