javascript не всегда срабатывает в правильном порядке, иногда ломается

Question

Я немного озадачен этим по ряду причин, иногда это работает, иногда нет.Когда вы сужаете порт представления до менее чем 945 пикселей, элементы subnav должны переключаться, но иногда они этого не делают.Я также получаю некоторые неожиданные результаты.

У меня есть кодовая ручка здесь

https://codepen.io/robbiemcmullen/pen/BqdRpN

мой код выглядит следующим образом: -

 //toggle for subnavs
        $(document).ready(function(){

            //only toggle if window size is less than 945px
            $(window).resize(function(){

                var submenu = $('.nav-wrapper');

                if (window.innerWidth < 945) {
                    $(document).on('click','nav ul li',function() {

                        $(submenu).toggle();

                    });
                }
            });

            var listItem = $('.navigation-toggles__list-item');

             //hide mega menu when settings activated
             $(listItem).mouseleave(function(){
                      $(userMenu).hide();
             });

             var userIcon = $('.navigation-user-icon'),
             userMenu = $('.dashboard-user-menu');

            //toggle dashboard menu
             $(userIcon).click(function(e) {
             e.preventDefault();
                    $(userMenu).toggle();
            });


        });

кто-нибудь может сказать мне, куда я идунеправильно?