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。是的，我可以把它放在resize函数中，但是当我刷新页面时，我必须稍微调整窗口大小以使其工作。我希望你能帮助我。谢谢你的回答。

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，它将只定义事件处理程序。如果总是定义事件处理程序并检查其中的窗口宽度，它将起作用。

如果我在窗口宽度大于800px时刷新站点，则jQuery单击事件不起作用

1 个答案: