По нажатию на "меню" исполняется второе условие и игнорируется первое, при повторном нажатии в обратном порядке. Необходимо одновременное исполнение
menu.onclick = function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
var x = document.getElementById("menu_wrap");
if (x.className === "navigation-advertisement") {
x.className += " wrap";
} else {
x.className = "navigation-advertisement";
}
};
Ответы (2 шт):
Автор решения: Chingiz Mamedov
→ Ссылка
Так тут тогда все предельно ясно :) Дело в том что, вы проверяете как string ровняется ли ваш класс какому-то значению, но это и не правильно, вообще у классов есть свои методы. Надо проверять через classList.contains. Давай сократим твой код и сделаем правильным ;)
const menu = document.getElementById("menu");
menu.onclick = function myFunction() {
var x = document.getElementById("myTopnav"),
y = document.getElementById("menu_wrap");
var isContainX = x.classList.contains('responsive'),
isContainY = y.classList.contains('wrap');
isContainX ? x.classList.remove('responsive') : x.classList.add('responsive');
isContainY ? y.classList.remove('wrap') : y.classList.add('wrap');
};.responsive {
color: red;
}
.wrap {
color: blue;
}<div id="menu">Menu</div>
<div id="myTopnav" class="topnav ">Nav</div>
<div id="menu_wrap" class='navigation-advertisement'>menu_wrap</div>
Автор решения: Sergei Kirjanov
→ Ссылка
Вероятно "myTopnav" и "menu_wrap" на одном элементе.
Ничего не игнорируется.
Попробуйте разнести по разным элементам (не сильно красиво, но самое простое)