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>

Answer 2

我倾向于做

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

然后只是查询，因为CSS和Javascript在测量窗口时的大小略有不同。

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

2 个答案: