Cuando hago clic en los botones no pasa nada. Estoy tratando de hacer que se abran y se cierren. ¿Cómo puedo solucionar esto?
HTML
<div class="sidenav"> <img src="assets/images/placeholder-logo.svg"> <li ng-repeat="item in data" ng-if="dataLoaded"> <button class="dropdown-btn">{{item.streamName}} <i class="fa fa-caret-down"></i> </button> <div class="dropdown-container"> <ul> <li ng-repeat="element in item.apps"> <button class="dropdown-btn">{{element.appName}} <i class="fa fa-caret-down" ng-if="element.sheets.length"></i> </button> <ul> <li ng-repeat="sheet in element.sheets"> <button class="dropdown-btn">{{sheet.sheetName}} </button> </li> </ul> </li> </ul> </div> </li> </div>JAVASCRIPT
var dropdown = document.getElementsByClassName("dropdown-btn"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { this.classList.toggle("active"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); }Su código está funcionando, pero ocultará el área de contenido solo después del segundo clic en el botón porque el valor inicial dropdownContent.style.display es una cadena vacía, pero verifica si es igual a "bloquear".
Entonces, el primer clic en el botón establece el área de contenido para display: block .
Debe cambiar la marca a dropdownContent.style.display === ""
var dropdown = document.getElementsByClassName("dropdown-btn"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { this.classList.toggle("active"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block" || dropdownContent.style.display === "") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); }