Question

我发现自基金会3以来提到的这个类似的错误，通常是因为没有包括foundation.min.js。我已将此包含在内，但下拉菜单中的链接无效。

<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="../css/normalize.css" />
<link rel="stylesheet" href="../css/foundation.min.css" />
<link rel="stylesheet" href="includes/style.css" />
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation.min.js"></script>
<script src="../js/vendor/modernizr.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<nav class="top-bar" data-topbar role="navigation">

    <ul class="title-area">
        <li class="name">
          <h1><a href="#">dashboard</a></h1>
        </li>
         <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

  <section class="top-bar-section">
    <!-- Left Nav Section -->
    <ul class="left">
    </ul>

    <!-- Right Nav Section -->
    <ul class="right">
        <li><a href="chapters.php">chapters</a></li>
        <li><a href="sections.php">sections</a></li>
        <li><a href="paragraphs.php">paragraphs</a></li>
        <li><a href="references.php">references</a></li>
        <li><a href="annotations.php">annotations</a></li>
        <li><a href="help.php">help</a></li>
        <li class="has-dropdown">
            <a href="#" class="name">Create</a>
            <ul class="dropdown">
                <li><a href="categories.php?task=new">new chapter</a></li>
                <li><a href="sections.php?task=new">new section</a></li>
                <li><a href="paragraphs.php?task=new">new paragraph</a></li>
                <li><a href="annotations.php?task=new">new annotation</a></li>
            </ul>
        </li>
    </ul>
  </section>

</nav>
</body>
</html>

我错过了一个设置吗？我已经看到preventDefault（）被提到可能是罪魁祸首，但为什么地球上的默认点击行为会被阻止......对于可点击的菜单链接？

Answer 1

必须在结束BODY标记之前调用$(document).foundation();行，而不是HEAD标记。我在加载DOM元素之前加载了基础。

这解释了这种不幸行为。

基础5：下拉菜单链接未激活

1 个答案: