我嘗試使用“下拉選單”,當它在 div 之外時,它是有效的。
但是當它在 div 內或動態添加時,它不起作用。
jsfiddle上的示例
編碼:
<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 class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Menu A</a>
<a class="dropdown-item" 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>
uj5u.com熱心網友回復:
您的 .dropdown-menu 未使用下拉按鈕包裹在 div 內。
<div>
<button type="button" data-bs-toggle="dropdown">drop down in div</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Menu A</a>
<a class="dropdown-item" href="javascript:void(0);">Menu B</a>
</div>
</div>
對于可運行的代碼片段
<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 class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">Menu A</a>
<a class="dropdown-item" 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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/485768.html
