如何在响应式网站上停止 jQuery 和 jQuery Mobile 文件之间的冲突？

Question

我正在为桌面、平板电脑和手机等基础知识构建响应式网站。我有一个使用列表的水平菜单，仅适用于移动设备，我将其切换到三行菜单图标。单击时会出现一个菜单覆盖面板。

问题是当我将 jQueryfiles 引入移动覆盖面板时，其他屏幕尺寸上的水平菜单停止工作。如果屏幕宽度低于 321，我尝试使用 jQuery 进行条件语句，然后使用 getScript 调用 jQuery mobile 的脚本。但它似乎不承认这一点。谁能告诉我如何解决这个问题。我在响应式和 jquery 移动设计方面相当新。
谢谢

在标题中：

<script src="Scripts/jquery-1.11.1.min.js"></script>

<script src="Scripts/jquery.mobile-1.4.2.min.js"></script>



<script>

$(document).ready(function() {
    if ( $(window).width() < 321) { 

      $('#wrapper').css('background-color' , '#ccc');

     /* $.getScript("Scripts/jquery.mobile-1.4.2.min.js");*/
    }
    else {
      $('#wrapper').css('background-color' , '#fff');
    }

 })
 </script>

我的水平菜单：

 <nav id="headerNav" class="lefty">
        <ul>
           <li><a href="index.html">Home </a></li>
          <li><a href="meal.html">Meals</a></li>
          <li><a href="Sandwiches.html">Sandwiches</a></li>
        </ul>
 </nav>

我的手机菜单：

 <div id="myPanel" data-role="panel" data-swipe-close="true" 
  data- dismissible="true"  data-position="right">
   <ul id="mobileNavigation">
          <li><a href="index.html">Home </a></li>
          <li><a href="meal.html">Meals</a></li>
          <li><a href="Sandwiches.html">Sandwiches</a></li>

   </ul>
 </div> 

解决方案：省略 jQuery Mobile 文件

单独使用标头，而是使用以下任何一种：

1。

$(document).ready(function() {
    if ( $(window).width() <= 320) { 
    $.getScript("../Scripts/jquery.mobile-1.4.2.min.js");
    }



})
</script>

2。

if (screen.width <= 960) {
   var head    = document.getElementsByTagName('head')[0];
   var script  = document.createElement('script');
   script.type = 'text/javascript';

   script.src  = '/../Scripts/jquery.mobile-1.4.2.min.js';
   head.appendChild(script);
}

</script>

Answer 1

查看answer

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}