Почему точка в функции classList. () Работает с некоторыми, а не с другими?

Question

Итак, я пытаюсь добавить классы в javascript, и я помещаю showMenu.classList.toggle ('. Open') с периодом после открытия, и события щелчка работают. Тем временем я ставлю период после урока на другие свои функции, и одна работает, когда я добавляю другую, а затем другая отключается. Может ли кто-нибудь объяснить мне, что происходит? Вот мой код:

const menuBtn = document.querySelector('.toggler');
const showMenu = document.querySelector('.showmenu');
const links = document.querySelector('.showlink');
const showLinks = document.querySelectorAll('.showlinks > li');



menuBtn.addEventListener('click', function(){
    showMenu.classList.toggle('.open');
    console.log(showMenu.classList.toggle('open'))
    links.classList.toggle('.open');
    showLinks.forEach(item => item.classList.toggle('open'));
    console.log(showLinks);
});

Answer 1

Вы должны передавать класс без точки, поэтому просто showMenu.classList.toggle('open'), поэтому ваш код должен выглядеть примерно так:

const menuBtn = document.querySelector('.toggler');
const showMenu = document.querySelector('.showmenu');
const links = document.querySelector('.showlink');
const showLinks = document.querySelectorAll('.showlinks > li');

menuBtn.addEventListener('click', function(){
  showMenu.classList.toggle('open');
  links.classList.toggle('open');

  console.log(showMenu.classList);
  console.log(links.classList);

  showLinks.forEach(item => {
    item.classList.toggle('open');

    console.log(item.classList);
  });
});