Estoy intentando usar javascript para determinar si un elemento tiene una clase y luego eliminarlo, pero parece que no puedo hacerlo funcionar.
el nombre de la clase show tiene la propiedad display: block;
var drop = document.getElementsByClassName('dropdown'); var link = document.getElementsByClassName('faculties') var i for (let i = 0; i < link.length; i++) { link[i].addEventListener('click', () => { var present = drop.classList.contains('show'); if (present == true) { // drop.classList.remove('show') alert('hi') drop[i].classList.toggle("show"); }); } <div class="right programmes"> <div class="widget"> <h1>Our Programmes and Courses</h1> </div> <div class="widget"> <div class="faculties"> <a>Faculty of Physical Sciences <i class="fas fa-chevron-down"></i></a> <div class="dropdown"> <h1>Faculty Stuff</h1> </div> </div> <div class="faculties"> <a>Faculty of Biological Sciences <i class="fas fa-chevron-down"></i></a> <div class="dropdown"> <h1>Faculty Stuff</h1> </div> </div> <div class="faculties"> <a>Faculty of Health Sciences <i class="fas fa-chevron-down"></i></a> <div class="dropdown"> <h1>Faculty Stuff</h1> </div> </div> </div> </div>Use hidden aquí (y agréguelo como un atributo booleano en su HTML para reflejar el estado inicial):
const faculties = document.querySelectorAll('.faculties'); const dropdowns = document.querySelectorAll('.dropdown'); for (const faculty of faculties) { faculty.addEventListener('click', e => { for (const dropdown of dropdowns) { dropdown.hidden = ![...faculty.children].includes(dropdown); } }) } <div class="right programmes"> <div class="widget"> <h1>Our Programmes and Courses</h1> </div> <div class="widget"> <div class="faculties"> <a>Faculty of Physical Sciences <i class="fas fa-chevron-down"></i></a> <div class="dropdown" hidden> <h1>Faculty Stuff</h1> </div> </div> <div class="faculties"> <a>Faculty of Biological Sciences <i class="fas fa-chevron-down"></i></a> <div class="dropdown" hidden> <h1>Faculty Stuff</h1> </div> </div> <div class="faculties"> <a>Faculty of Health Sciences <i class="fas fa-chevron-down"></i></a> <div class="dropdown" hidden> <h1>Faculty Stuff</h1> </div> </div> </div> </div>Está tratando de trabajar con una colección HTML y no funciona de esa manera. Debe recorrer la colección o encontrar el elemento con la clase.
Círculo
for (var j=0; j < drop.length; j++) { if(j!==i) drop[j].classList.remove("show"); } drop[i].classList.toggle('show');Seleccione
// Select the element with a new selector const active = document.querySelector(".programmes .dropdown.show"); // Make sure it is not the current thing you clicked on if (active && active !== drop[i]) { active.classList.remove('show'); } drop[i].classList.toggle('show');