javascripthtmltwitter-bootstrapdrop-down-menubootstrap-5

How to open dropdown menu from outside button

Opening bootstrap dropdown menu from button inside table using

function xonclick() {
  const dropdownButton = document.getElementById('settingsDropDown');
  const dropdownMenu = document.getElementById('seadedMenyy');
  
  // Position the dropdown near the clicked button
  const clickedButton = document.getElementById('grid_muu');
  const buttonRect = clickedButton.getBoundingClientRect();
  
  dropdownMenu.style.position = 'absolute';
  dropdownMenu.style.left = buttonRect.left + 'px';
  dropdownMenu.style.top = (buttonRect.bottom + 2) + 'px';
  
  // Create and show dropdown
  const dropdown = new bootstrap.Dropdown(dropdownButton);
  dropdown.show();
}
#settingsDropDown {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

.dropdown-menu {
  display: block;
  opacity: 0;
  transition: opacity 0.2s;
}

.dropdown-menu.show {
  opacity: 1;
}
 
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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>

does not open it. Clicking in "Open menu" button does nothing. How to open dropdown menu near this button if button is clicked?

Dropdown is defined in other place in DOM and display is set to none.

Solution

  • Okay, Then let's create a working solution that positions the dropdown correctly on the first click and handles subsequent clicks properly:

    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();
}

    And improve the positioning further.

    .dropdown-menu {
  margin: 0 !important;
  padding: 0.5rem 0;
  transform: none !important;
}

#settingsDropDown {
  position: fixed;
  visibility: hidden;
  pointer-events: none;
}

    Then it will give you the consistent positioning and proper dropdown on every click.