Здравствуйте, проблема такова, есть сайт, в нём меню в блоке, после 900px даю ему display: none; и после этого при нажатии на кнопку оно показывается или скрывается соответственно с помощью JS
var isOpenMenu = false;
function openMenu() {
$('.wrapper-top-line-menu').fadeIn(200);
isOpenMenu = true;
}
function closeMenu() {
$('.wrapper-top-line-menu').fadeOut(200);
isOpenMenu = false;
}
function deleteStyleMenu() {
$('.wrapper-top-line-menu').removeAttr('style');
isOpenMenu = false;
}
$('.icon-menu-mobile').on('click', function() {
$('.wrapper-top-line-menu').css({'margin-top': $('.top-line').outerHeight()});
if(!isOpenMenu) {
changeScreen();
openMenu();
}
else {
defaultScreen();
closeMenu();
}
});
Если я закрыл его, то в стилях у него style="display: none; margin-top: высота полоски меню", когда ширина браузера становится больше 900px, то соответственно я не вижу меню и имею margin, то-есть с помощью JS мне нужно сбросить это всё после 900px, делаю так
function resizeScreen() {
if($(window).width() > 900) {
defaultScreen();
deleteStyleMenu();
}
}
$(window).on('resize', resizeScreen);
И проблема в том, что он-то после 900 удаляет у меня атрибут "style" только если меню было открыто, то-есть, если оно показывается и я увеличиваю браузер, то после 900px всё благополучно пропадает, атрибут style у элемента исчезает, но если оно закрыто, то оно пропадает только после 918px, в чём прикол? Почему так работает, что я делаю не так? Есть какие-то предположения или может способ получше вернуть в исходное состояние меню?
