javascript并非总是以正确的顺序触发，有时会中断

Question

出于某些原因，我对此有些困惑，有时可以，有时不能。当您将视口缩小到小于945px时，subnav元素应切换，但有时不切换。我也得到了一些意想不到的结果。

我在这里有一个Codepen

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();
            });


        });

有人可以告诉我我要去哪里错吗？