-1

我正在尝试合并Codrops 的 jQuery 插件- 这使得菜单变成了左侧和底部的栏。我想在桌面屏幕上使用与通常顶部栏相同的菜单，只是更改演示附带的 id 和类的样式。我想知道最好的 Javascript 解决方案是在最大宽度为 768 上包含插件脚本，然后在更大的地方删除它们。我也希望它在浏览器调整大小时进行自我检查和更新。这是我到目前为止所拥有的...

 <script>
  (function() {
if( window.innerWidth > 600 ) {
   $.getSscript("assets/js/modernizr.custom.js");
   $.getSscript("assets/js/classie.js");
   $.getSscript("assets/js/borderMenu.js");
}
 })();
 </script>
4

1 回答 1

0

所以我做了一些研究，我想我找到了另一个答案。它不链接脚本，但您可以将它们复制并粘贴到移动屏幕上调用的函数中。

下面是我在页脚底部合并的代码。我在此代码上方链接了所有必要的脚本，因此它可以在所有屏幕尺寸上加载（该插件带有自定义的modernizer.js并使用了classie.js）

    /////////////////////////////////
    // MATCH MEDIA FOR MOBILE MENU //
    /////////////////////////////////  

   /* JavaScript Media Queries */
if (matchMedia) {
    //*change this to whatever size screens you'd like, I wanted mine to only work on 768 or below
    var mq = window.matchMedia("(min-width: 768px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// media query change
function WidthChange(mq) {

   //* Put jQuery plugin's code here


}

到目前为止，它工作得很好。如果您注意到上述代码有任何可以更改的地方，请告诉我。

感谢OptimalWorks.net 的 Craig Buckler提供的精彩教程和示例代码。

于 2015-06-28T15:57:45.810 回答