Javascript 如何使jQuery移动导航脚本仅在小屏幕上触发？

我的jQuery不是很好——我试图通过拼凑一些现有脚本来学习，但运气不太好。我试图在Wordpress网站上设置一个菜单，在大屏幕上作为一个普通的水平导航条，并在980px以下的宽度上成为一个jQuery下拉菜单——我已经让下拉菜单工作了，但我不知道如何让它只在小屏幕上工作

有效的代码是：

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

jQuery（文档）.ready（函数（$）{
$（“#mmenu”）.hide（）；
$（“.mtoggle”）。单击（函数（）{
$（“#mmenu”）。滑动切换（500）；
});
});

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

我试过了

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

jQuery（文档）.ready（函数（$）{
如果（$（窗口）.width（）<979）{
$（“#mmenu”）.hide（）；
$（“.mtoggle”）。单击（函数（）{
$（“#mmenu”）。滑动切换（500）；
}
});
});

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

有问题的网站是，在上下文中查看菜单是否有帮助

---

任何建议都将不胜感激-谢谢

如果重新输入代码，您可以看到问题。。。if在单击处理程序函数之前关闭

下面是更正后的代码：

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

jQuery（文档）.ready（函数（$）{
如果（$（窗口）.width（）<979）{
$（“#mmenu”）.hide（）；
$（“.mtoggle”）。单击（函数（）{
$（“#mmenu”）。滑动切换（500）；
});
}
});

我倾向于这样做

body:before{content:".";display:none;} (for desktop)
body:before{content:"..";display:none;} (for tablet)
body:before{content:"...";display:none;} (for mobile)

---

然后查询一下，因为CSS和Javascript在测量窗口时大小略有不同

您的站点上似乎有语法错误。结束括号太多。