动态包含时，Zurb 顶部导航栏下拉菜单在小屏幕上不起作用答案

【问题标题】：Zurb Top Nav Bar drop-down not working on small screen when dynamically included动态包含时，Zurb 顶部导航栏下拉菜单在小屏幕上不起作用
【发布时间】：2013-02-11 00:17:03
【问题描述】：

我正在尝试了解 Zurb Foundation 的顶部导航栏。当我通过 js 包含导航标记时，我第一次很难让它工作。当我将代码复制到每个 html 页面时，它突然起作用了。这很好，但我在我的网站中添加了一个新部分，其中页面是用 ruby 动态形成的。

实际问题是，当屏幕很小时，页面右上角的下拉菜单会停止工作。

在我网站的首页上，导航在一个小屏幕上工作：Mac Media Production home page，但是在此页面上：Mac Media Production Hosting page，导航栏不再正常运行，据我所知，标记- up 是一样的：

<!-- Header and Nav -->

<nav class="top-bar">
  <ul>
    <!-- Title Area -->
    <li class="name">
      <h1>
        <a href="http://www.mac-media.co.uk">
          mac media
        </a>
      </h1>
    </li>
    <li class="toggle-topbar"><a href="http://www.mac-media.co.uk/hosting"></a></li>
  </ul>

  <section>
    <!-- Top Right Nav Section -->
    <ul class="right">

      <li class="has-dropdown">
        <a class="active" href="http://www.mac-media.co.uk/index.html">Menu</a>
        <ul class="dropdown">
          <li><label>Pages</label></li>
          <li><a href="http://www.mac-media.co.uk/index.html">Home</a></li>
          <li><a href="http://www.mac-media.co.uk/contact-us.html">Contact Us</a></li>
          <li class="divider"></li>
          <li><label>Our Services</label></li>
          <li><a href="http://www.mac-media.co.uk/web-design.html">Web Design</a></li>
          <li><a href="http://www.mac-media.co.uk/photo.html">Photo</a></li>
          <li><a href="http://www.mac-media.co.uk/video-production.html">Video</a></li>
          <li><a href="http://www.mac-media.co.uk/hosting.html">Hosting</a></li>
          <li><a href="http://www.mac-media.co.uk/email.html">Emails</a></li>
          <li><a href="http://www.mac-media.co.uk/domain-names.html">Domain Names</a></li>
          <li class="divider"></li>
          <li><label>Existing Clients</label></li>
          <li><a href="http://www.mac-media.co.uk/hosting/front-page">Control Panel</a></li>
          <li><a href="http://www.outitgoes.com/">Webmail Login</a></li>
        </ul>
      </li>
        <li class="divider hide-for-small"></li>
    </ul>

         </section>

</nav>

谁能帮忙！？

【问题讨论】：

标签： html zurb-foundation

【解决方案1】：

在 ZURB Foundation 3 中，这一行：

<li class="toggle-topbar"><a href="http://www.mac-media.co.uk/hosting"></a></li>

应该改为：

<li class="toggle-topbar"><a href="#"></a></li>

这只是 jQuery 的占位符

官方文档：http://foundation.zurb.com/old-docs/f3/navigation.php

【讨论】：

感谢您抽出宝贵时间回复。在这种情况下，建议的更改并没有解决问题。但是，它迫使我进行更彻底的查看，我发现正文底部的 .js 没有正确引用。所以谢谢你，问题解决了！
太棒了。您的网站看起来很棒。您是否对文件进行了比较，或者只是在浏览文件时看到了差异？我有时会使用免费软件DiffMerge。我知道您可以从命令行执行此操作，但当您只想比较两个文件时，它可能是一个有用的工具。它的界面有点奇怪，但我只需单击两个图标并将两个文件拖放到（浏览）字段中。