dropdown-menu doesn't work inside the div or dynamically-CodePudding

I try to use "dropdown-menu", when it's outside div, it's works.

But when it's inside the div or added dynamically, it's not works.

The code:

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

<button data-bs-toggle="dropdown">drop down</button>
<div>
  <button type="button" data-bs-toggle="dropdown">drop down in div</button>
</div>

<div >
  <a  href="javascript:void(0);">Menu A</a>
  <a  href="javascript:void(0);">Menu B</a>
</div>

<div id="dynamicBox">
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

CodePudding user response：

Your .dropdown-menu is not wrapped inside the div with the dropdown button.

<div>
 <button type="button" data-bs-toggle="dropdown">drop down in div</button>
 <div >
  <a  href="javascript:void(0);">Menu A</a>
  <a  href="javascript:void(0);">Menu B</a>
 </div>
</div>

And for the runnable snippit

  <link rel="stylesheet" href="https://v3dboy.ir/previews/html/frest/frest/assets/vendor/css/rtl/core.css">
  
<div>
<button type="button" data-bs-toggle="dropdown">drop down in div</button>
<div >
<a  href="javascript:void(0);">Menu A</a>
<a  href="javascript:void(0);">Menu B</a>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>