Блог

У меня есть этот код, который может переключаться между элементами, если пользователь открывает элемент, все остальные элементы должны закрываться, и это работает, но если я нажимаю на один и тот же элемент несколько раз, ничего не происходит, и я не могу понять, почему. Мне нужна помощь.

Вот мой код:

 const heads = [...document.querySelectorAll(".head")];
const dropdowns = [...document.querySelectorAll(".head-dropdown")];
const activate_filter = document.getElementById("filter-btn");

let isActive = false;
let isFilterActive = false;
let queue = [];

if (!isFilterActive) {
  dropdowns.forEach((val, i) => {
    val
      .querySelector(".dropdown-search")
      .setAttribute(
        "name",
        `${heads[i].querySelector("p").textContent}-search`
      );
  });
}

activate_filter.addEventListener("click", e => {
  dropdowns.forEach((val, i) => {
    val.classList.remove("activated");
    val.dataset.isActivated = false;
  });
  if (!isFilterActive) {
    heads.forEach((val, i) => {
      const p = val.children[0];
      p.innerHTML  = `<i class='eos-icons'>arrow_drop_down</i>`;
      val.addEventListener("click", handleEventAll);
      val.style.cursor = "pointer";
    });
    isFilterActive = true;
  } else {
    heads.forEach(val => {
      const p = val.children[0];
      const i = p.querySelector("i");
      if (i) {
        i.remove();
      }

      val.removeEventListener("click", handleEventAll);
      val.style.cursor = "default";
    });
    isFilterActive = false;
  }
});

function handleEventAll(e) {
  const test = e.target.querySelector(".head-dropdown");
  test.classList.add("activated");
  queue.unshift(test);
  if (queue.length > 3) {
    queue.pop();
  }

  dropdowns.forEach((val, i) => {
    if (!val.dataset) {
      val.dataset.isActivated = false;
    }
    let t = eval(queue[0].dataset.isActivated);
    console.log(t);
    if (t) {
      console.log("in true", queue[0]);
      queue[0].dataset.isActivated = true;
      queue[0].classList.toggle("activated");
      queue.pop();
    } else {
      console.log("in false", queue[0].dataset);
      queue[0].dataset.isActivated = false;
      console.log(queue);
      queue[1].classList.remove("activated");

      queue.pop();
    }
  });
}

window.addEventListener("click", e => {});
 

Элементы добавляются в очередь, и очередь сортирует их, если предыдущий элемент, который был открыт, правильно закрыт, и он открывает новый элемент, на который нажимается. Если щелкнуть один и тот же элемент дважды, очередь закрывает элемент, но не открывает его снова, пока не будет нажат какой-либо другой элемент.

Вот codepen для полного использования: https://codepen.io/darioKolic/pen/eYdYzdy

Я переписал функцию handleEventAll, чтобы создать необходимую функциональность без использования очереди. проверьте это

Что я сделал, так это сохранил текущее состояние (активированный класс существует или нет) для выбранного элемента, а затем я удаляю весь активированный класс из всех элементов, затем добавляю или удаляю активированный класс, зависит от старого значения.