Question

我正在尝试使用基础下拉菜单开发我的网站。当我看到PC浏览器的反复大小时，它正在工作（不是第一次：点击第一次网址将是.... / index.html＃再次重新加载，然后它的工作原理。第二次它的工作）。当我在移动设备上加载网址并尝试测试它无效时。

以下是我在header.html中的代码：

<div class="menuSet" style="background-image: url('img/image67.JPG');">
<nav class="top-bar row changedWmiddle" data-topbar style="background-image: url('img/image67.JPG');height:44px;"> 
   <ul class="title-area setMenu"> 
      <li class="name"> 
        <h1><a href="#" class="setMenu1">&nbsp;</a></h1> 
      </li> 
      <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
      <li class="toggle-topbar menu-icon setMenu2">
        <a href="#"><span>Menu</span></a>
      </li> 
   </ul> 
   <div class="top-bar-section">
     <!-- Left Nav Section --> 
     <ul class="left row" style="width:98%;"> 
       <li class="setMenu3" style="min-width:16.43%;background-image:url('img/image67.JPG');"><a href="http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website(without_comment)/" class="setMenu5" style="background-image:url('img/image67.JPG');"><img src="img/image68.JPG"></a></li> 
       <li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><a href="http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website(without_comment)/Reason_For_Change.html" class="setMenu5" style="background-image: url('img/image67.JPG');"><img src="img/image69.JPG"></a></li>
       <li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><a  href="http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website(without_comment)/customer.html" class="setMenu5" style="background-image: url('img/image67.JPG');"><img src="img/image70.JPG"></a></li>
       <li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><a href="http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website(without_comment)/company.html" class="setMenu5" style="background-image: url('img/image67.JPG');"><img src="img/image71.JPG"></a></li>
       <li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><a href="http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website(without_comment)/motto.html" class="setMenu5" style="background-image: url('img/image67.JPG');"><img src="img/image72.JPG"></a></li>
       <li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><a href="http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website(without_comment)/recruit.html" class="setMenu5" style="background-image: url('img/image67.JPG');"><img src="img/image73.JPG"></a></li>
     </ul> 
   </div> 
 </nav>

我在我的index.html和链接脚本中包含了header.html，如。

在页面开头：

<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/modernizr.js"></script>

在底部:(标记之前）

   <script src="js/foundation/foundation.js"></script>
   <script src="js//foundation/foundation.topbar.js"></script>
   <script src="js/foundation.min.js"></script>
   <script>
      $(document).foundation();
   </script>

这是我的网址链接 http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website%28without_comment%29/index.html

请帮忙。提前谢谢。

Answer 1

foundation.min.js包含所有基础js。

您需要使用＆＃34; foundation.min.js＆＃34; 或＆＃34; foundation.js，foundation.topbar.js等＆＃34;。

参考：http://foundation.zurb.com/docs/javascript.html

<script src="/js/foundation.min.js"></script>

<!-- or individually -->

<script src="/js/foundation.js"></script>
<script src="/js/foundation.alert.js"></script>
<!-- ... -->
<script src="/js/foundation.dropdown.js"></script>
<script src="/js/foundation.tab.js"></script>

您遇到的麻烦可能来自同时加载两个js文件。试着加载一套。

Answer 2

我发现问题出在modernizr.js上，要测试它你可以删除基础会按预期工作。

基础5.2.2 topbar下拉列表不适用于移动设备

2 个答案: