如何在小屏幕上觸發此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

如果你重新編寫代碼，你可以看到問題......如果在單擊處理函數之前關閉

這里更正的代碼：

<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在測量窗口時的大小略有不同。