Question

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

问题是当我将移动覆盖面板所需的jQuery文件带入其他屏幕尺寸的水平菜单时停止工作。如果屏幕宽度低于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..
}

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

1 个答案: