解决Bootstrap下拉菜单在Div内部或动态添加时失效的问题

<link rel="stylesheet" href="https://v3dboy.ir/previews/html/frest/frest/assets/vendor/css/rtl/core.css">

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    下拉菜单
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">选项 1</a>
    <a class="dropdown-item" href="#">选项 2</a>
    <a class="dropdown-item" href="#">选项 3</a>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

   // 创建下拉菜单元素
   const dropdownDiv = document.createElement('div');
   dropdownDiv.classList.add('dropdown');

   const dropdownButton = document.createElement('button');
   dropdownButton.classList.add('btn', 'btn-primary', 'dropdown-toggle');
   dropdownButton.setAttribute('data-bs-toggle', 'dropdown');
   dropdownButton.textContent = '动态下拉菜单';

   const dropdownMenu = document.createElement('div');
   dropdownMenu.classList.add('dropdown-menu');

   const dropdownItem1 = document.createElement('a');
   dropdownItem1.classList.add('dropdown-item');
   dropdownItem1.href = '#';
   dropdownItem1.textContent = '动态选项 1';

   const dropdownItem2 = document.createElement('a');
   dropdownItem2.classList.add('dropdown-item');
   dropdownItem2.href = '#';
   dropdownItem2.textContent = '动态选项 2';

   // 组装元素
   dropdownMenu.appendChild(dropdownItem1);
   dropdownMenu.appendChild(dropdownItem2);
   dropdownDiv.appendChild(dropdownButton);
   dropdownDiv.appendChild(dropdownMenu);

   // 将下拉菜单添加到页面
   const dynamicBox = document.getElementById('dynamicBox');
   dynamicBox.appendChild(dropdownDiv);