0

我的 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/ 。

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

4

2 回答 2

1

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

这里是更正的代码：

<script type="text/javascript">
jQuery(document).ready(function($) {
  if($(window).width() < 979) {
    $("#mmenu").hide();
    $(".mtoggle").click(function() {
      $("#mmenu").slideToggle(500);
    });
  }
});
</script>
于 2013-08-20T14:16:19.827 回答
1

我倾向于做

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

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

于 2013-11-20T02:36:31.157 回答