как удалить (переключить) «активный» список классов, который уже выбран

Question

Я борюсь с удалением «активного» класса из ссылки, которая уже выбрана.

Глядя на строку 20 в JavaScript. Разве classLink.toggle не должен добавлять / удалять «активные» на clickedElement? Я даже попробовал несколько подходов, таких как

 if (clickedElement.classList.contains('active')) {
  clickedElement.classList.remove('active');
} else {
  clickedElement.classList.add('active');
}

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

https://jsfiddle.net/Evenclan/09sn2kd3/15/

Answer 1

Просто чтобы ответить на реальный вопрос, почему toggle не отключает .active в вашей скрипке. https://jsfiddle.net/Evenclan/09sn2kd3/15/

То, что вы делаете в первую очередь, перед переключением:

for (let activeLink of activeLinks) {
  activeLink.classList.remove('active');
}

Это удаляет .active из всех элементов ссылки. Это означает, что у всех больше нет классов или, по крайней мере, нет классов .active.

В следующей строке вы toggle класс .active, который был только что удален:

clickedElement.classList.toggle('active');

Таким образом, класс добавляется обратно (то, что там не добавляется, то, что там удаляется).

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

for (let activeLink of activeLinks) {
  if(clickedElement !== activeLink) activeLink.classList.remove('active');
}

clickedElement.classList.toggle('active');

https://jsfiddle.net/8jrwn3sx/

Answer 2

classList включает метод переключения.

this.classList.toggle('active');

Как переключать класс с использованием чистого javascript в html

РЕДАКТИРОВАТЬ: JsFiddle, который вы включили, работает. Я открыл консоль и нажал на разные ссылки, и они правильно переключались.