Q:

Window resize menu bug

desktop view
desktop view when menu item has been clicked on mobile and then resized to desktop
I have an inline menu on top of the page, which transforms to "hamburger" icon with a drop-down menu when on mobile.
Here is the Jade
    i.fa.fa-bars.fa-2x.header__icon.js-nav-toggle

    nav.header__nav.js-nav(role="navigation")
        ul
            li.header__nav__item
                a.js-track(href="#about", data-item="about") About
            li.header__nav__item
                a.js-track(href="#features", data-item="features") Benefits
            li.header__nav__item
                a.js-track(href="#howitworks", data-item="howitworks") How it works
            li.header__nav__item
                a.js-track(href="#options", data-item="options") Lease options
            li.header__nav__item
                a.js-track(href="#savings", data-item="savings") Savings
            li.header__nav__item
                a.js-track(href="#enquire", data-item="enquire") Enquire
            li.header__nav__item.faq-menu
                a.js-track(href="/faq") FAQs

In css I'm doing this transformation using media queries, so the icon appears.
+ I have some jquery to make it work (to make dropdown toggle when clicked on the menu icon on mobile view, toggle back when menu item is clicked, and condition to prevent toggling when menu item is clicked on desktop view).
So, here is the code:
$(document).ready(function() {
$('.js-nav-toggle').on('click', function(e) {
    $('.js-nav').slideToggle(300);
    e.preventDefault();
});
if ($(window).width() < 768) {
$('.header__nav__item').on('click', function(e) {
    $('.js-nav').slideToggle(300);
    });
}

});
The problem is that all that works perfectly only when page is loaded and not resized (laptop or mobile). But when you loaded the page on a wide window and then resized it to mobile it becomes bad. In this case it's not toggling back when I click any of the menu items (that's obvious as my jquery is only for "document ready". 
And visa versa (when you resize from mobile to laptop view) incorrect behavior (if you clicked some menu on mobile the whole ul disappears (toggled) into nothing). 
I tried to put the same jquery code to "on window resize" jquery handler, however it does not help.
$window.on('resize', function() {
if ($(window).width() < 768) {
    $('.header__nav__item').on('click', function(e) {
        $('.js-nav').slideToggle(300);
    });
}

}, 150);
My assumption was that it should help at least when I resize from big screen to small. But...fail...
One more comment: every menu item just scrolls the page down to some section (one-page web-site), so the page is not reloaded.
Any thoughts and help are appreciated.
Thank you. 
UPDATE 
Added screenshots
Thanks to the answer below, the following code fixed the problem with desktop --> mobile resize.
    $('.header__nav__item').on('click', function(e) {
  if ($(window).width() < 768) {
     $('.js-nav').slideToggle(300);
  }
});

Tried to fix mobile --> desktop with the following code
    $window.on('resize', function() {
    if ($(window).width() >= 768 && ($('.js-nav').is(':hidden'))) {
        $('.js-nav').html('Show all');
    }
}, 150);

Does not work, even with $('.js-nav').show()
However, I've found another question, which is similar, and will try to restructure the code the same way soon (that will answer my question completely)
Display or hide elements on window resize using jQuery

A:

I'm not sure if I fully understood your requirements, but at least to deal with the window resize problem that you stated here is a possible solution. You don't need to bind an event handler to resize event on window, just put your if statement that checks for current window width inside of your on click handler function:
$('.header__nav__item').on('click', function(e) {
  if ($(window).width() < 768) {
     $('.js-nav').slideToggle(300);
  }
});

This way every time you click the window width will be checked dynamically.

