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

Posted 2023-05-09

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

【英文标题】：How to stop conflict between jQuery and jQuery Mobile files on responsive website?

【发布时间】：2014-09-24 01:58:57

【问题描述】：

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

问题是当我将 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>

【参考方案1】：

查看answer

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

【讨论】：

我上面的代码确实针对移动屏幕进行更改，因为对背景灰色的更改有效。但是 getScript 代码行有问题，它没有调用 jquery.mobile-1.4.2.min.js 。我需要在脚本 jquery 部分中包含它，而不是在标题中单独包含它。那行代码有问题吗。现在我把它注释掉了。

原来我的解决方案是正确的我的问题是我没有正确测试它。当我在 Dreamweaver 的 Multiscreen 中进行测试时，我使用了一个显示不同屏幕尺寸的 Firefox 插件。