使用“运行代码片段”按钮并单击“打开菜单”按钮运行代码片段不会执行任何操作。它应该打开菜单。
Menu 定义在 DOM 中的其他位置，且 display 设置为 none。
如何从此页面运行此代码片段？
function xonclick() {
const dropdownButton = document.getElementById('settingsDropDown');
const dropdownMenu = document.getElementById('seadedMenyy');
const clickedButton = document.getElementById('grid_muu');
// Get current dropdown instance
const existingDropdown = bootstrap.Dropdown.getInstance(dropdownButton);
// Toggle behavior
if (existingDropdown) {
existingDropdown.dispose();
dropdownMenu.classList.remove('show');
return;
}
// Get precise button position
const rect = clickedButton.getBoundingClientRect();
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Set position with scroll offset
dropdownMenu.style.position = 'absolute';
dropdownMenu.style.left = `${rect.left}px`;
dropdownMenu.style.top = `${rect.bottom + scrollTop}px`;
// Create and show new dropdown instance
const dropdown = new bootstrap.Dropdown(dropdownButton);
dropdown.show();
}.dropdown-menu {
margin: 0 !important;
padding: 0.5rem 0;
transform: none !important;
}
#settingsDropDown {
position: fixed;
visibility: hidden;
pointer-events: none;
}<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="dropdown">
<button id="settingsDropDown" class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" id="seadedMenyy">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<table>
<tr>
<td>Some text</td>
<td><button id="grid_muu" onclick="xonclick()">Open menu</button></td>
</tr>
</table>
</body>隐藏菜单并使用按钮切换
const dropdownButton = document.getElementById('settingsDropDown');
const dropdownMenu = document.getElementById('seadedMenyy');
const clickedButton = document.getElementById('grid_muu');
clickedButton.addEventListener('click', () => {
// Close the menu if already open
const isMenuOpen = dropdownMenu.style.display === 'block';
if (isMenuOpen) {
dropdownMenu.style.display = 'none';
dropdownMenu.classList.remove('show');
return;
}
// Get precise button position
const rect = clickedButton.getBoundingClientRect();
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Set position with scroll offset
dropdownMenu.style.position = 'absolute';
dropdownMenu.style.left = `${rect.left}px`;
dropdownMenu.style.top = `${rect.bottom + scrollTop}px`;
// Show the dropdown
dropdownMenu.style.display = 'block';
dropdownMenu.classList.add('show');
}).dropdown-menu {
margin: 0 !important;
padding: 0.5rem 0;
transform: none !important;
display: none;
/* Hide by default */
}
#settingsDropDown {
position: fixed;
visibility: hidden;
pointer-events: none;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="dropdown">
<button id="settingsDropDown" class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" id="seadedMenyy">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<table>
<tr>
<td>Some text</td>
<td><button id="grid_muu">Open menu</button></td>
</tr>
</table>