Intentando cerrar el offcanvas con el botón de cerrar dentro del offcanvas. En este momento, solo puedo cerrarlo con el botón con el que lo abrí. ¿Qué hice mal? Ver código adjunto.
(function mainScript() { "use strict"; const offcanvasToggle = document.querySelector('[data-bs-toggle="offcanvas"], [data-bs-dissmiss="offcanvas"]'); const offcanvasCollapse = document.querySelector(".offcanvas-collapse"); offcanvasToggle.addEventListener("click", function () { offcanvasCollapse.classList.toggle("open"); }); })(); .offcanvas-collapse { position: fixed; top: 0; /* Height of navbar */ bottom: 0; left: 100%; width: 30%; padding: 8px 8px; overflow-y: auto; visibility: hidden; background-color: #343a40; transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out; } .offcanvas-collapse.open { visibility: visible; transform: translateX(-100%); } <div id="navbar" class="flex-wrap center"> <div id="nav-toggler-wrapper"> <button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation"> <span class="menu-label">Menu</span> </button> </div> </div> <div id="sidenav" class="offcanvas offcanvas-collapse"> <div class="offcanvas-header flex-wrap center between"> <button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation"> <span class="menu-label">Close</span> </button> </div> </div>Debe usar querySelectorAll en lugar de querySelector , porque intenta seleccionar más de un elemento y usa forEach para aplicar eventListner a cada uno como:
(function mainScript() { "use strict"; const offcanvasToggle = document.querySelectorAll('[data-bs-toggle="offcanvas"], [data-bs-dissmiss="offcanvas"]'); const offcanvasCollapse = document.querySelector(".offcanvas-collapse"); offcanvasToggle.forEach(el => { el.addEventListener("click", function() { offcanvasCollapse.classList.toggle("open"); }); }); })(); .offcanvas-collapse { position: fixed; top: 0; /* Height of navbar */ bottom: 0; left: 100%; width: 30%; padding: 8px 8px; overflow-y: auto; visibility: hidden; background-color: #343a40; transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out; } .offcanvas-collapse.open { visibility: visible; transform: translateX(-100%); } <div id="navbar" class="flex-wrap center"> <div id="nav-toggler-wrapper"> <button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation"> <span class="menu-label">Menu</span> </button> </div> </div> <div id="sidenav" class="offcanvas offcanvas-collapse"> <div class="offcanvas-header flex-wrap center between"> <button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation"> <span class="menu-label">Close</span> </button> </div> </div>