如何讓這個jQuery手機導航腳本只能在小屏幕上觸發？

我的jQuery不是很好 - 我試圖通過拼湊現有腳本的一些部分來學習，但沒有很好的運氣。我試圖讓Wordpress網站上的菜單充當普通的大屏幕尺寸的水平導航欄，併成爲寬度低於980像素的jQuery下拉菜單 - 我有下拉菜單，但無法弄清楚如何讓它在小屏幕尺寸上工作只有。如何讓這個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/如果在上下文中看到菜單將有所幫助。

任何意見將非常感謝 - 謝謝！

來源

2013-08-20 Emma W

您的網站似乎有語法錯誤。有一個太多的右括號。 –

如果你縮進代碼，你可以看到問題的......如果點擊處理函數

這裏更正後的代碼之前關閉：

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

來源

2013-08-20 14:16:19 sebi

我傾向於做

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-20 02:36:31

如何讓這個jQuery手機導航腳本只能在小屏幕上觸發？

回答

相關問題