Question

因此，我正在尝试ZURB Foundation的一些构建基块。我使用“ copyPasta”方法实施，因此我只是将其网站上的代码复制到我的源代码中就这样了。

到目前为止，除了元素的“交互性”之外，其他所有东西都可以正常工作。在基金会网站上，例如： https://foundation.zurb.com/building-blocks/blocks/topbar-mega-menu-dropdown.html

“一个”元素是交互式的。当我将鼠标悬停在它上面时，会出现一个带有一些选项的下拉栏。这在我的本地版本上不会发生。我只是将他们的HTML和CSS代码复制到了我的测试网站，总体上所有内容都能正确显示，唯一的例外是该元素的“可悬停性”。当我将鼠标悬停在网站的本地版本上时，什么也没有发生。

我使用chrome devtools调查了其网站的源代码，并且看到了一些JavaScript源，这些源未包含在我的网站中。但是，如果需要JS，我希望相应的JS显示在其站点的JS部分中，但是没有任何内容。

那我想念什么？

编辑：这是我的代码的相关部分

<!DOCTYPE html>
<html class = "no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Vendor/Foundation/css/foundation.css">
<link rel="stylesheet" href="Vendor/Foundation/css/app.css">
<title>Hauptseite</title>
</head>

<body>
<div class="top-bar">
<div class="top-bar-left">
  <ul class="dropdown menu" data-dropdown-menu>
    <li class="menu-text">Site Title</li>
    <li class="mega-menu">
      <a data-toggle="mega-menu" href="#">One</a>

      <div class="dropdown-pane bottom" id="mega-menu" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true; vOffset:11">

        <div class="row expanded">
          <div class="column">
            <ul class="menu vertical">
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </div>
          <div class="column">
            <ul class="menu vertical">
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </div>
          <div class="column">
            <ul class="menu vertical">
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </div>
        </div>

      </div>
    </li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
  </ul>
</div>
<div class="top-bar-right">
  <ul class="menu">
    <li><input type="search" placeholder="Search"></li>
    <li><button type="button" class="button">Search</button></li>
  </ul>
</div>
</div>

< div class="grid-container">

<div class = "grid-y grid-frame grid-padding-y">


</div>



</div>


<script src="FrontendLogic/frontendlogic.js"></script>
<script src="Vendor/jquery/jquery-3.4.1.min.js"></script>
<script src="Vendor/Foundation/js/app.js"></script>
<script src="Vendor/Foundation/js/vendor/what-input.js"></script>
<script src="Vendor/Foundation/js/vendor/foundation.js"></script>


</body>


</html>

基础构建块-缺少JS吗？

0 个答案: