Question

我想在我的网站上有一个下拉菜单。我在服务器上存储文件时工作正常。但是，我想从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>

只是产生这个：

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

Answer 1

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>

从CDN加载时使用Foundation JavaScript的问题

1 个答案: