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

Ссылка скопирована
CSS HTML JavaScript
25 января 2026 1 ответ

Здравствуйте. Делаю верстку проекта для отработки навыков. Решила сделать открытие выпадающего меню при помощи 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; }

.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');   } });

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'); } });

Дополнительно:

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

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

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

    Код можно заметно сократить, если
    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; }

    .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; }

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

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

    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');   } });

    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'); } });

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

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

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

    и вот тут

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

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

    Должно быть:

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

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

    • спасибо большое))) сто раз смотрела код и не заметила)) теперь все работает)
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Игорь Волков Ответ

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

    Для начала, убедитесь, что у элементов кнопки выпадающего меню правильно прописаны классы или идентификаторы, которые используются в скрипте. Например, если у вас есть кнопка с классом "dropdown-toggle" и меню с классом "dropdown-menu", убедитесь, что в скрипте обработчика события клика на кнопку правильно указаны эти классы.

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

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

    Наконец, если все вышеперечисленные шаги не помогли решить проблему, попробуйте создать минимальный пример кода (MCVE), который демонстрирует проблему, и задать вопрос на форумах или в группах разработчиков для получения дополнительной помощи.

    Приведу пример кода на языке PHP для отображения выпадающего меню:

    <button class="dropdown-toggle">Меню</button>
<div class="dropdown-menu">
  <a href="#">Пункт меню 1</a>
  <a href="#">Пункт меню 2</a>
  <a href="#">Пункт меню 3</a>
</div>

    <button class="dropdown-toggle">Меню</button> <div class="dropdown-menu"> <a href="#">Пункт меню 1</a> <a href="#">Пункт меню 2</a> <a href="#">Пункт меню 3</a> </div>

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

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ Instagram Как вставить группу полей ACF в записи после 1-го абзаца в WordPress? 0 ответов