如果窗口寬度大於800px時刷新站點，則jQuery click事件不起作用

Question

所以...在jQuery中，我有條件說if ($(window).width() < 800) {}並且在它里面我有這個：

$(document).on ('click', '.menu', function () {
  $('.menuLinks').css({
    'animation-name' : 'menuLinks',
    'animation-duration' : '.3s',
    'animation-fill-mode' : 'forwards'
  });
});

這是我的HTML：

<header id="header">
    <a href="" class="logo">EXAMPLE</a>
    <div class="menu"></div>
    <div class="menuLinks">
      <a>example</a>
      <a>example</a>
    </div>
  </header>

而所有這些我都准備就緒。 我的問題是，當我刷新頁面且窗口寬度小於800px並單擊.menu時， .menuLinks會獲得CSS並一切正常，但是當我以大於800px的窗口寬度刷新並在800px以下調整窗口大小時它不起作用。 如果我想讓它工作，我必須用小於800px的窗口寬度刷新它。 是的，我可以將其放在調整大小功能中，但是刷新頁面時，我必須稍微調整窗口大小才能使其正常工作。 我希望你能幫助我。 感謝您的回答。

Answer 1

將click事件處理程序移至if語句之外，然后使用if語句包裝處理程序的內部，這樣看起來

$(document).on ('click', '.menu', function () {
    if ($(window).width() < 800) {
        $('.menuLinks').css({
            'animation-name' : 'menuLinks',
            'animation-duration' : '.3s',
            'animation-fill-mode' : 'forwards'
        });
    }
});  

將if語句移到事件處理程序內的原因是因為，當頁面觸發ready事件時，如果窗口寬度小於800，它將僅定義事件處理程序。 如果事件處理程序始終被定義，並且您檢查其中的窗口寬度，則它將起作用。