How to open dropdown from separate button in stackoverflow code snippet

Question

Running code snippet using "Run code snippet" button and clicking "Open menu" button does nothing. It should open menu.

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

How to run this code snippet from this page?

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>

mplungjan · Accepted Answer · 2024-11-20 11:31:04Z

Hide the menu and toggle it with the button

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');
});
document.addEventListener('click', (event) => {
  // Check if the click happened outside the menu and button
  if (!dropdownMenu.contains(event.target) && !clickedButton.contains(event.target)) {
    dropdownMenu.style.display = 'none';
    dropdownMenu.classList.remove('show');
  }
});
// Delegate click event to the dropdown menu for menu items
dropdownMenu.addEventListener('click', (event) => {
  if (event.target.matches('.dropdown-item')) {
    dropdownMenu.style.display = 'none';
    dropdownMenu.classList.remove('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>

Selecting item from menu or clicking in background does not close menu. How to close menu if item is selected or clicked outside of it?

Collectives™ on Stack Overflow

How to open dropdown from separate button in stackoverflow code snippet

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related