javascript - 从CDN加载时Foundation JavaScript出现问题

我想在我的网站上有一个下拉菜单。将文件存储在服务器上时，我可以正常工作。但是，我想从CDN加载它们。但是，当我尝试此操作时，会发生什么事情，即CSS方面运行良好，而JavaScript方面却无法运行，这意味着以下HTML：

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css">
    </head>
    <body>
        <div class="top-bar">
            <div class="top-bar-right">
                <ul class="dropdown menu" data-dropdown-menu>
                    <li>
                        <a href="#">Dropdown menu</a>
                        <ul class="menu vertical">
                            <li>
                                <a href="#">First dropdown link</a>
                            </li>
                            <li>
                                <a href="#">Second dropdown link</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.js"></script>
        <script type="text/javascript">
            $(document).foundation();
        </script>
    </body>
</html>

只是产生这个：

javascript - 从CDN加载时Foundation JavaScript出现问题-LMLPHP

任何想法这段代码有什么问题吗？

最佳答案

在https://github.com/zurb/foundation-sites/blob/v6.3/bower.json处进行的快速检查表明Foundation 6支持jquery版本〜2.2.0，因此更改您的JQuery版本应该可以解决您的问题

$(document).foundation();

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.js"></script>


<div class="top-bar">
  <div class="top-bar-right">
    <ul class="dropdown menu" data-dropdown-menu>
      <li>
        <a href="#">Dropdown menu</a>
        <ul class="menu vertical">
          <li>
            <a href="#">First dropdown link</a>
          </li>
          <li>
            <a href="#">Second dropdown link</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>