Quiero activar un menú desplegable desde otro botón, pero solo lo activa una vez o no lo activa si ya está activado desde el menú desplegable real, aquí está el código:
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul id="dropdown_menu" class="dropdown-menu"> <li><a class="dropdown-item">link1</a></li> <li><a class="dropdown-item">link2</a></li> </ul> </div> <button style="margin-top: 250px" onclick="enabledropdown()">Click me</button> </body> </html>guion:
function enabledropdown() { document.getElementById('navbarDropdownMenuLink').setAttribute('class', 'nav-link dropdown-toggle show') document.getElementById('navbarDropdownMenuLink').setAttribute('aria-expanded', 'true') document.getElementById('dropdown_menu').setAttribute('class', 'dropdown-menu show') document.getElementById('dropdown_menu').setAttribute('data-popper-placement', 'bottom-start') }agregar una segunda función que desactive el menú desplegable (cambiando los atributos de nuevo al original) parece resolver ese problema si sigue desactivando y activando el menú desplegable desde el botón, pero una vez que se hace clic en el menú desplegable real, deja de funcionar nuevamente.
(ya lo intenté
document.getElementById('navbarDropdownMenuLink').click()en lugar de cambiar los atributos uno por uno, pero no funciona)