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.