javascript - 如何使这个 jQuery 移动导航脚本仅在小屏幕上触发？

Question

我的 jQuery 不是很好 - 我试图通过将现有脚本拼凑起来来学习，但运气不太好。我正在尝试在 WordPress 网站上获取一个菜单，以充当大屏幕尺寸上的普通水平导航栏，并成为宽度低于 980px 的 jQuery 下拉菜单 - 我已经使下拉菜单正常工作，但不知道如何让它仅在小屏幕尺寸上工作。

有效的代码是:

    <script type="text/javascript">
jQuery(document).ready(function($) {
    $("#mmenu").hide();
    $(".mtoggle").click(function() {
        $("#mmenu").slideToggle(500);
    });
});
</script>

但显然它也隐藏了大屏幕尺寸上的水平导航。

我已经尝试过

    <script type="text/javascript">
jQuery(document).ready(function($) {
    if($(window).width() < 979) {
    $("#mmenu").hide();
    $(".mtoggle").click(function() {
        $("#mmenu").slideToggle(500);
    }
    });
});
</script>

但它似乎完全破坏了代码并使其完全不起作用，我不明白为什么。

相关网站是http://host26.qnop.net/~fpsl/如果在上下文中查看菜单会有帮助的话。

如有任何建议，我们将不胜感激 - 谢谢!

Answer 1

如果您重新缩进代码，您可以看到问题... if 在点击处理函数之前关闭

这里是更正后的代码:

<script type="text/javascript">
jQuery(document).ready(function($) {
  if($(window).width() < 979) {
    $("#mmenu").hide();
    $(".mtoggle").click(function() {
      $("#mmenu").slideToggle(500);
    });
  }
});
</script>