Hola, actualmente estoy trabajando en un proyecto de arranque en el que me enfrento a un problema relacionado con el submenú de uno de los enlaces del menú principal. Básicamente, lo que hace Bootstrap es alternar (agregar o eliminar) la clase "mostrar" del submenú, cuando se hace clic en el enlace del menú principal. Y cuando se hace clic en un enlace en el submenú, restaura el menú principal a un estado en el que el submenú está oculto. Lo que necesito es que cuando se haga clic en cualquiera de los enlaces en el submenú o esté activo, no debería ocultar el submenú. Adjuntando la parte de mi código html y JavaScript. Cualquier sugerencia o ayuda sería apreciada.
let submenu = document.getElementById("collapseExample"); let submenu_link = submenu.querySelectorAll("ul li a"); for (var i = 0; i < submenu_link.length; i++) { submenu_link[i].addEventListener("click", function() { submenu.classList.toggle('show') }); } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous" /> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" /> <ul> <li class="active"><a href="./index.html"><span>Dashboard</span></a></li> <li><a href="#"><span>Send New Artworks</span></a></li> <li class="active side__nav__submenu" data-bs-toggle="collapse" href="#collapseExample"><a href="#"><span>Artworks</span></a></li> <div class="collapse" id="collapseExample"> <ul class="list-group"> <li><a href="/abc">No Response</a></li> <li><a href="/cde">Require Amendments</a></li> <li><a href="/efg">Customer Approved</a></li> </ul> </div> </ul> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>