Почему не выполняется JQuery скрипт?

Question

[1011012]

Написал вот такой вот скрипт:

$(window).resize( function () {
           if (window.innerWidth <= 576) {    //При ширине экрана < 576px
            $('.nav-burger').on('click', function () { // При клике по label-у 
             $('.Menu').fadeIn(1);  //Внизу появляется меню
            $('.nav-burger').css('background-image', 'url("img/icon-cross.svg")', 'no-repeat');  // Картинка  изначально  стоит "Бургер", при клике меняется на "Крестик"
              
          Вопрос 1: // Как сюда  дописать  скрипт, который при клике еще раз на $('.nav-burger') скрывает 
           $('.Menu') и возвращает картинку "Бургер", никак не могу это реализовать... 
                
               $('.Onf' ).on('click', function() { // При клике на a-шку меню 
                $('.nav-burger').css('background-image', 'url("img/icon-menu.svg")', 'no-repeat');  // 
                Появляется картинка "Бургер"
                $('.Menu').fadeOut(1); // Меню скрывается
                                                   });
                });
            }
               Вопрос 2: //Как заставить эту часть скрипта работать так как нужно???:
                else { // Иначе
                if (window.innerWidth > 576) { // При ширине > 576px
                $('.burger').removeClass('.Menu'); // В див-обертке бургер меню удаляется класс, 
                   стилизующий меню при ширине 576 px и < 
                $('.burger').addClass('.Menuf'); //  В див-обертке бургер меню добавить класс, 
                                                           стилизующий меню при ширине десктопной версии
                $('#About').fadeIn(1); // Так же добавляется тег <hr>, изначально скрытый в медиазапросах при максимальной  ширине 576px
                 }
             }
             });

P.S. //- в комментариях описано, как я рассуждал, когда писал этот скрипт

Answer 1

[Narts]

$(window).resize( function () {
if (window.innerWidth <= 576)

зачем?
С помощью CSS скрываете (display: none) выдвижной блок с меню, а в js ставите событие onclick toggleClass('opened') (условно) и slideToggle. И так же, стилями классу.

Через класс .opened указываете новые стили для бургера (крестик)

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

Comments

[1011012]

Переписал так, как Вы сказали и вот что получилось:
$(document).ready(function(){
$('.nav-burger').click(function() {
$('.nav-burger').toggleClass('lll');
$('.Menu').toggleClass('Onfk');
});
$('.Onf').click(function() {
$('#Menu').toggleClass('None');
$('.nav-burger').css('background-image', 'url("img/icon-menu.svg")');
});
});
Все хорошо работает, но только один раз. Как сделать так, что бы это все происходило по кругу без перезагрузки страницы?

Answer 2

[Exploding]

Ну не работает скорее всего из-за этого:

$('.nav-burger').css('background-image', 'url("img/icon-menu.svg")', 'no-repeat');

Синтаксис метода .css может принимать один или два параметра, но никак не три.
Помимо того, что возникает ошибка в js, так еще и в css значение "no-repeat" относится к свойству "background-repeat", а не к "background-image".

И вообще, эту всю js-ную писанину можно удалить и почитать про медиа-запросы в css.

P.S. И забыть наконец-то о том, что у jq есть такие методы как fadeIn, fadeOut, slideUp и т.д.