窗口大小調整菜單錯誤

Question

desktop view
desktop view when menu item has been clicked on mobile and then resized to desktop

我對頁面，該頁面在移動時轉變爲「漢堡包」圖標，在下拉菜單的頂部內嵌菜單。

這裏是玉

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 

在CSS中我使用媒體查詢做這個轉變，所以出現圖標。

+我有一些jQuery讓它工作（當點擊移動視圖上的菜單圖標時，下拉切換，點擊菜單項時切換回來，以及在桌面視圖上點擊菜單項時禁止切換的條件） 。

所以，這裏是代碼：

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

}）;

問題是，只有在頁面加載並且不調整大小（筆記本電腦或移動設備）時，所有這些才能完美地工作。但是，當你在一個寬大的窗口中加載頁面，然後調整到移動設備時，它變得很糟糕。在這種情況下，當我點擊任何菜單項時（這是顯而易見的，因爲我的jquery只適用於「文檔準備好」），所以它不會反轉。

並且反之亦然（當您從移動設備移動到筆記本電腦視圖時）不正確的行爲你點擊一些菜單上移動整個UL消失（切換）到什麼）。

我試圖把同樣的jQuery代碼爲「on窗口調整」 jQuery的處理程序，但它並不能幫助。

$window.on('resize', function() { 
if ($(window).width() < 768) { 
    $('.header__nav__item').on('click', function(e) { 
     $('.js-nav').slideToggle(300); 
    }); 
} 

}，150）;

我的假設是，它應該至少在我從大屏幕調整到小屏幕時提供幫助。但...失敗...

還有一條評論：每個菜單項只是將頁面向下滾動到某個部分（單頁網站），所以頁面不會重新加載。

任何想法和幫助表示讚賞。 謝謝。

UPDATE

新增截圖

多虧了下面的答案，下面的代碼固定桌面的問題 - >移動調整大小。

$('.header__nav__item').on('click', function(e) { 
    if ($(window).width() < 768) { 
    $('.js-nav').slideToggle(300); 
    } 
}); 

試圖修復移動 - >桌面下面的代碼

$window.on('resize', function() { 
    if ($(window).width() >= 768 && ($('.js-nav').is(':hidden'))) { 
     $('.js-nav').html('Show all'); 
    } 
}, 150); 

不工作，甚至$（ 'JS-NAV。'）。顯示（）

不過，我發現了另一個問題，這是類似的，並會嘗試儘快重組代碼相同的方式（將完全回答我的問題）

Display or hide elements on window resize using jQuery

Answer 1

我我不確定我是否完全理解了您的要求，但至少要處理您在此提出的窗口調整大小問題是一種可能的解決方案。你並不需要綁定一個事件處理程序的窗口調整大小事件，只要把你如果檢查您的單擊處理函數中當前窗口的寬度聲明：

$('.header__nav__item').on('click', function(e) { 
    if ($(window).width() < 768) { 
    $('.js-nav').slideToggle(300); 
    } 
}); 

這樣，每次單擊窗口寬度將被動態檢查。