Почему не меняется кнопка выпадающего меню при переключении?

Question

[Виктория Храмкова]

Здравствуйте. Делаю верстку проекта для отработки навыков. Решила сделать открытие выпадающего меню при помощи JS. Меню работает. Но кнопка переключается только один раз. Где допустила ошибку?
И нужно ли еще делать открытие меню без JS для подстраховки? Если да, то как?
Если что, могу скинуть ссылку на репозиторий.

.button-subcatalog {
  position: absolute;
  top: -10px;
  left: 243px;
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #000000;
  opacity: 0.3;
}

.button-subcatalog-opened {
  background-image: url("../images/header/plus-icon.svg");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
}

.button-subcatalog-closed {
  background-image: url("../images/header/minus-icon.svg");
  background-size: 16px 2px;
  background-repeat: no-repeat;
  background-position: center;
}

.button-subcatalog:hover,
.button-subcatalog:active {
  opacity: 1;
}

.catalog-popover-wrapper {
  position: absolute;
  top: 30px;
  left: -60px;
  z-index: 1;
  width: 1100px;
  padding-bottom: 51px;
  padding-left: 60px;
  background-color: #ffe17f;
}

.popover-closed {
  display: none;
}

.popover-closed .button-subcatalog-opened {
  display: block;
}

.popover-closed .button-subcatalog-closed {
  display: none;
}

.popover-open {
  display: block;
}

.popover-open .button-subcatalog-opened {
  display: none;
}

.popover-open .button-subcatalog-closed {
  display: block;
}

let catalogPopover = document.querySelector('.catalog-popover-wrapper');
let buttonSubcatalog = document.querySelector('.button-subcatalog');

catalogPopover.classList.remove('popover-closed-nojs');
buttonSubcatalog.classList.remove('button-subcatalog-opened-nojs');

buttonSubcatalog.addEventListener('click', function () {
  if (catalogPopover.classList.contains('popover-closed')) {
    catalogPopover.classList.remove('popover-closed');
    catalogPopover.classList.add('popover-opened');
    buttonSubcatalog.classList.remove('.button-subcatalog-opened');
    buttonSubcatalog.classList.add('button-subcatalog-closed');
  } else {
    catalogPopover.classList.add('popover-closed');
    catalogPopover.classList.remove('popover-opened');
    buttonSubcatalog.classList.remove('.button-subcatalog-closed');
    buttonSubcatalog.classList.add('button-subcatalog-opened');
  }
});

Comments

[Вадим]

https://qna.habr.com/help/rules

3.8. Использовать для демонстрации фрагментов кода только специальный тег <code> или специальные демонстрационные ресурсы (например, codepen- https://codepen.io/). Размещение фрагментов кода в виде изображений запрещено.

[Ankhena]

В этом коде нажатие на кнопку работает сколько угодно раз.

Код можно заметно сократить, если
1. оперировать классом на родителе, а не на двухэлементах
2. оперировать добавлением и удалением одного класса, а не меняя два.

Меню работает. Но кнопка переключается только один раз. Где допустила ошибку?

Нужно сделать песочницу на codepen.io с видимой проблемой.

И нужно ли еще делать открытие меню без JS для подстраховки? Если да, то как?

С помощью :focus-within
Собственно, тогда и js вовсе не нужен.
Но так никто не делает на проде. На проде такие вещи делают на js.

[Виктория Храмкова]

Ankhena, спасибо за ответ и помощь)) просто на 2 курсе по верстке мы делали открытие меню с js и без него. Но там было для мобильного меню в седоне. Поэтому и спросила делается ли так вообще)) понятно теперь, что одного js хватит))

[Виктория Храмкова]

Ankhena, сократила код, все работает, только на кнопке знаки + и - пропали

[Виктория Храмкова]

Ankhena,

.button-subcatalog {
  position: absolute;
  top: -10px;
  left: 243px;
  z-index: 3;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #000000;
  opacity: 0.3;
}

.button-subcatalog-opened {
  background-image: url("../images/header/plus-icon.svg");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
}

.button-subcatalog-closed {
  background-image: url("../images/header/minus-icon.svg");
  background-size: 16px 2px;
  background-repeat: no-repeat;
  background-position: center;
}

.catalog-closed .catalog-popover-wrapper,
.catalog-closed .button-subcatalog-opened {
  display: none;
}

.catalog-open .button-subcatalog-closed {
  display: block;
}

<li class="navigation-catalog-item catalog-closed">
            <a class="navigation-link" href="catalog.html">КАТАЛОГ ТОВАРОВ</a>
            <button class="button-subcatalog button-subcatalog-open" type="button">
              <span class="visually-hidden">Подменю.</span>
            </button>
            <div class="catalog-popover-wrapper catalog-closed-nojs">
              <ul class="subcatalog-list">
                <li class="subcatalog-item">

let catalogItem = document.querySelector('.navigation-catalog-item');
let buttonSubcatalog = document.querySelector('.button-subcatalog');

catalogItem.classList.remove('catalog-closed-nojs');

buttonSubcatalog.addEventListener('click', function () {
  if (catalogItem.classList.contains('catalog-closed')) {
    catalogItem.classList.remove('catalog-closed');
    catalogItem.classList.add('catalog-opened');
  } else {
    catalogItem.classList.add('catalog-closed');
    catalogItem.classList.remove('catalog-opened');
  }
});

Answer 1

[Максим]

Потому что у вас тут точка лишняя

buttonSubcatalog.classList.remove('.button-subcatalog-closed');

и вот тут

buttonSubcatalog.classList.remove('.button-subcatalog-opened');

Должно быть:

buttonSubcatalog.classList.remove('button-subcatalog-closed');
buttonSubcatalog.classList.remove('button-subcatalog-opened');

Comments

[Виктория Храмкова]

спасибо большое))) сто раз смотрела код и не заметила)) теперь все работает)