javascript - Foundation 5.2.2 顶部栏下拉菜单不适用于移动设备

Question

我正在尝试使用基础下拉菜单来开发我的网站。当我从电脑浏览器看到响应大小时，它正在工作 (不是第一次: 第一次点击 url 将是 ..../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。

您需要使用“foundation.min.js”或“foundation.js、foundation.topbar.js等”。

引用: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 文件所致。 尝试只加载一组。