Question

我目前正在评估Zurb Foundation并试图创建一个带菜单的顶栏。不知何故，我的下拉菜单中的链接不起作用，所以我基本上了：

我下载了zip，取了他们的index.html并用top bar documentation中的示例替换了内容。在删除了示例中不必要的所有内容后，我得到了这个：

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
    <nav class="top-bar" data-topbar role="navigation">
      <section class="top-bar-section">
        <ul class="right">
          <li class="has-dropdown">
            <a href="#">Go to</a>
            <ul class="dropdown">
              <li><a href="http://www.google.com">Google</a></li>
              <li><a href="http://www.yahoo.com">Yahoo!</a></li>
            </ul>
          </li>
        </ul>
      </section>
    </nav>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

这样做：菜单打开（悬停时），我可以点击链接。但是，如果我删除JavaScript初始化

$(document).foundation();

菜单仍然打开（但现在只有点击而不是悬停），当我将鼠标悬停在菜单条目上时，状态栏会显示相应的链接，但点击它们不会做任何事情。

我认为我们已经结束了，我们需要JavaScript来处理最基本的事情。我的意思是我们现在甚至可以在没有JavaScript的情况下制作动画，但在这里我甚至无法打开链接？我做错了什么还是这个真正意图的行为？作为NoScript用户，这对我来说是不行的。

Answer 1

是的，你是对的。 ZURB Foundation中的这些功能在没有JavaScript的情况下无法正常工作。此外，移动菜单在没有JavaScript的情况下也无法正常工作，因此您需要使用JavaScript才能使Top Bar正常工作。

顺便说一下，你可以在Foundation documentation旁边看到需要JavaScript正常工作的每个Foundation项目旁边的JS图标 - Top Bar有它。

顶级栏在Zurb Foundation 5中没有JavaScript的情况下工作吗？

1 个答案: