Как сделать, что бы работало? (вопрос для особо умных)

Question

Как сделать, что бы работало? (вопрос для особо умных)

Returno Мудрец (11620), на голосовании 7 лет назад

Когда, в мобильной версии меню раскрыто, а потом увеличить ширину экрана больше 768 px и нажать на меню, то иконка мобильного меню сбрасывается, как сделать, что бы такого не было?

https://jsfiddle.net/72oxsmt9/41/

// Мобильное меню
$(document).ready(function () {
$(".icon-mobile-menu").click(function(ob) {
ob.stopPropagation();
$(".icon-mobile-menu").addClass("toggle");
});
$('li > a').click(function(){
$('.icon-mobile-menu').removeClass("active");
})
$('.icon-mobile-menu').click(function() {
$(this).toggleClass('on');
$('#menu').slideToggle(350);
$(".icon-mobile-menu").toggleClass("show-x");
});
$(window).resize(function(){
var w = $(window).width();
if(w > 768 && $('#menu').is(':hidden')) {
$('#menu').removeAttr('style');
}
});
$('#menu').on('click',function(e){
e.stopPropagation();
if ( $('.icon-mobile-menu').is(':visible'))
$(this).removeAttr('style');
$('.icon-mobile-menu').removeClass('on');
})
});

// Конец мобильного меню

Дополнен 7 лет назад

Что бы такого не было,

Answer 1

"Чтобы такого не было" - тут есть два варианта: "чтобы при открытом мобильном меню всегда был крестик" или "чтобы после нажатия на основное меню мобильное меню закрывалось".

removeAttr('style') очень сильно меня смущает - он чистит вообще все выставленные стили. Лучше все-таки с классами работать.
Тепер по "бутерброду". При создании страницы там
class="icon-mobile-menu"
Растяжения-сжатия на это пока что не влияют. Клацаем по нему. Теперь он
class="icon-mobile-menu toggle on show-x active"
Сразу 4 класса для обозначения состояния "крестик"? Что-то много. Клацаем еще раз - получаем
class="icon-mobile-menu toggle"
Что эквивалентно начальному состоянию. toggle вообще ничего не делает?
Ок, снова клацаем и растягиваем страницу. Изменений в классах нет, выставляется невидимость.
Клацаем по меню. Теперь у нас
class="icon-mobile-menu toggle show-x"
Такого состояния пока что не было. Сужаем, изменений нет. Вот это - наше "неправильное" состояние, которого быть не должно.
Итого - у нас должно быть 4 состояния из 2 составляющих: видимость (зависит от ширины) и открытость меню. Поскольку для ширины мы пользуемся @media, нам нужен только 1 класс для контроля открытости меню.
У меню - 3 состояния, зависящие от этих же составляющих: если ширина позволяет, меню всегда видимо; если нет, то мобильное отображение, а видимость зависит от открытости.
Итак - замени все эти "toggle on show-x active" на 1 класс. Желательно также сделать, чтобы и кнопка, и меню управлялись состоянием одного элемента, например, поскольку они последовательно расположены, можно воспользоваться селектором css +, вроде
button.icon-mobile-menu+nav#id {закрытое меню}
button.icon-mobile-menu.active+nav#id {открытое меню}
А лучше воспользоваться аттрибутами data- - если, конечно, нет требований поддержки старых IE.
Если еще будут проблемы - спрашивай или пиши на skype pavlokyiv.