JS классов синхронизации? Если у одного элемента есть класс, у другого тоже должен быть класс - PullRequest
1 голос
/ 05 мая 2020

Я знаю, что есть много похожих вопросов относительно JS и проверки наличия у элемента определенного класса c. У меня все еще есть проблема, которую я не могу решить. У меня есть гамбургер навигации, который при нажатии превращается в X (используя CSS и JS) и открывает раскрывающееся меню. Гамбургер и это раскрывающееся меню видны только при указанном c медиа-запросе. Итак, если вы откроете меню, щелкнув гамбургер, измените размер окна, чтобы гамбургер и меню исчезли, измените его размер обратно (гамбургер появится снова, но меню не будет, поскольку оно автоматически закрывается), гамбургер по-прежнему отображается как X, потому что он не обновляется. Я заметил, что раскрывающееся меню (которое я не кодировал) имеет назначенный ему класс, в зависимости от того, открыто оно или нет. То же и с анимацией гамбургера. Если у него есть класс «is-active», он отображается как X, если нет, он отображается как гамбургер.

Теперь я хочу синхронизировать c гамбургер с раскрывающимся списком. Таким образом, если меню имеет класс "is-open", назначенный ему, гамбургеру должно быть назначено "is-active", в противном случае "is-active" должно быть удалено.

Я тестировал это code:

 if (dropdownmenu.classList.contains('is-open')){
    hamburger.classList.add("is-active");
 } else {
    hamburger.classList.remove("is-active");
 }

Проблема в том, что JS не проверяет постоянно. Поэтому, когда я изменяю размер окна, оно ничего не делает. Как мне синхронизировать c это? Извините за мой плохой английский sh и за мое понимание новичка JS.

1 Ответ

1 голос
/ 05 мая 2020

Попробуйте поместить свой код в обработчик window.onresize:

window.onresize = function() {
    if (dropdownmenu.classList.contains('is-open')){
        hamburger.classList.add("is-active");
    } else {
        hamburger.classList.remove("is-active");
    }
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...