如何修复基础6中不起作用的下拉菜单链接

Question

我从来没有使用过基金会6之前和之后建立了一个完整的网站，我意识到在我的顶部的下拉菜单链接不起作用。我到处寻找这个问题的答案，我看到了很多不同的答案。有些人说要下载更新版本的foundation.min.js，有些人说要下载更新版本的foundation.topbar.js，还有一些人认为这个问题无法解决。

下面是一些代码(我的网站可以在http://littleeternities.com上找到，这样你就可以自己看到我所说的“不工作的”链接是什么意思)。

TopBar码

    <!--Navigation-->
    <div class="title-bar" data-responsive-toggle="main-menu" data-hide-     for="medium">
    <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="main-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li><a href="#">Home</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
      <li class="has-submenu">
        <a href="#">About</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Portfolio</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a href="#">Services</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Custom Blog Design</a></li>
          <li><a href="#">Custom Web Design</a></li>
           <li><a href="#">Pre-Made Templates</a></li>
         <li><a href="#">Branding Packages</a></li>
        <li><a href="#">Web-Hosting</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a href="#">Courses</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">Perfect Your Business Plan</a></li>
      <li><a href="#">Kickstart Your Badass Online Business</a></li>
      <li><a href="#">Digital Innovator</a></li>
       <li><a href="#">More Courses</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a href="#">Free</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">Kickstart Your Badass Business Checklist</a></li>
      <li><a href="#">FREE Course: Build a Better Business in 7 Days</a></li>
      <li><a href="#">Business Brainstorming Workbook</a></li>
      <li><a href="#/">8 Business Tools to Use</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
<!-- /navigation -->

以下是添加的脚本

<script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../bower_components/what-input/what-input.js"></script>
    <script src="../bower_components/foundation-sites/dist/foundation.js"></script>
    <script src="../js/app.js"></script>
   <script src="../bower_components/foundation-sites/dist/foundation.min.js"></script>
  <script src="../js/foundation.topbar.js"></script>
<script src="../bower_components/foundation-sites/js/foundation.offcanvas.js"></script>

在文件app.js中，编写了以下JavaScript

$(document).foundation();

$(document).ready(function() {

});

到目前为止，我已经尝试过每一种方法来解决这个问题，现在我只是被困住了。如有任何答案，我们将不胜感激！)

Answer 1

似乎有两个问题：

1. 在you app.js中，将$(document).foundation();移动到$(document).ready(function(){});中。
2. 解决从Uncaught TypeError: $(...).owlCarousel is not a function启动的app.js，或者添加owl插件或注释此代码，如果您不使用。
3. 要么使用foundation.js (normal)，要么使用foundation.min.js (小型化)，但如果两者相同，则不要同时使用。
4. 试着一次删除一个插件，并首先识别是哪个插件导致导航出现问题。
5. 使用插件的顺序似乎有问题。重新安排一下， i. jquery.js，ii.what-input.js，iii.foundation.min.js，iv.foundation.topbar.js诉foundation.offcanvas.js六世。app.js
6. 根据您的评论，foundation.js中存在问题，而从foundation.js那里获得最新的问题解决了这个问题。