Zurb Foundation 顶部栏根本不工作
Posted
技术标签:
【中文标题】Zurb Foundation 顶部栏根本不工作【英文标题】：Zurb Foundation Topbar Not Working At All 【发布时间】：2014-08-08 21:42:01 【问题描述】：我在尝试让 Zurb 的 Foundation Topbar 在移动屏幕上工作时遇到了麻烦。
我正在 Chrome 上进行测试，屏幕宽度设置为最小。所有 CSS 和 JS 都已加载，菜单看起来还不错，直到您单击什么都没有。
注意：我使用的是 WordPress。
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?= (is_front_page() ? 'Revive Architects | London\'s most trusted architect for conversions / extensions ' : get_post_meta($post->ID, '_seo_title', true)); ?></title>
<meta name="description" content="<?= (is_front_page() ? 'London\'s most trusted architect. Over 25 years of architectural experience, we have helped hundreds over in clients in the London area.' : get_post_meta($post->ID, '_seo_description', true)) ?>">
<meta name="author" content="www.werdigital.co.uk">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- STYLESHEETS -->
<link rel="stylesheet" href="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/css/foundation.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<? bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!-- /STYLESHEETS -->
<!-- JS -->
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/vendor/jquery.js"></script>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/vendor/modernizr.js"></script>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/vendor/fastclick.js"></script>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.js"></script>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/js/script.js"></script>
<script>
jQuery(document).ready(
jQuery(document).foundation();
);
</script>
<!-- /JS -->
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<? wp_head(); ?>
</head>
<body>
<div class="page clearfix">
<header>
<div class="row header-wrapper">
<div class="large-12 medium-12 columns">
<a href="<? bloginfo('url'); ?>"><img class="logo" src="<? bloginfo('template_url'); ?>/images/logo.png" /></a>
</div>
</div>
<div class="top-nav">
<div class="row">
<div class="large-12 medium-12 columns">
<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<a href="<?= get_option('home'); ?>"><img class="logo-icon" src="<? bloginfo('template_url'); ?>/images/logo-icon.png" /></a>
</li>
<li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
</ul>
<section class="top-bar-section">
<ul id="menu-primary" class="right"><li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11"><a href="http://dev.revivearchitects.co.uk/about-us/">About Us</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://dev.revivearchitects.co.uk/architect-projects/">Projects / Services</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-23"><a href="http://dev.revivearchitects.co.uk/blog/articles-and-guides/">Articles</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://dev.revivearchitects.co.uk/contact-us/">Contact Us</a></li>
</ul>
</section>
</nav>
</div>
</div>
</div>
</div>
</header>
【问题讨论】：
【参考方案1】：尝试将您的 foundation() 调用包装在 jQuery(document).ready() 函数中，如下所示：
<script>
jQuery(document).ready(
jQuery(document).foundation();
);
</script>
可能不是问题...但是我想知道你的 DOM 是在你的 JS 有机会完全加载之前还是之后加载的，因为你正在加载你的 JS。
接下来，您可能缺少 base Foundation JS 文件。你有这个：
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>
但foundation.topbar.js 依赖 foundation.js（就像所有 Foundation 插件一样）。
接下来，您打算如何对 WordPress 生成的子菜单进行分类？请注意 Zurb Foundation 文档中的标记：
<li class="has-dropdown">
<a href="#">Right Button Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
</ul>
</li>
如果您检查您的生成内容，我敢打赌，您缺少<li> 上的"has-dropdown" 类和<ul> 上的"dropdown" 类。
[编辑]
我还注意到您在问题中编辑了标记，现在有两个 <nav> 元素，并且都定义了一个 data-topbar 属性。 （我不确定这是否只是您问题中的粘贴错误，或者您的标记是否真的像那样）。
尝试使用以下标记作为测试，以查看 Foundation Topbar 功能是否正常工作（这是文档中的示例）：
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</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">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown">
<a href="#">Right Button Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><a href="#">Left Nav Button</a></li>
</ul>
</section>
</nav>
如果确实有效，那么请重新检查您自己的标记，比较和对比哪些类和元素以及嵌套可能会有所不同，然后相应地调整您的代码。从他们的示例开始开始可能会更容易，然后从那里进行调整。
【讨论】：
感谢您的评论非常有帮助。但是，当我添加所有必需的内容时，仍然没有任何错误，没有错误。我也不需要任何下拉菜单，只需要主要的***导航。已经为此工作了几个小时，并开始考虑返回 Bootstrap。 @RichardSkinner 我根据您在问题中编辑的标记编辑了我的答案，希望对您有所帮助 从头开始并使用网站上的代码是一种享受。我完全是个白痴，自己没有尝试过。对不起，我的朋友浪费了你的时间。 @RichardSkinner 一点也不浪费，很高兴你能成功！玩得开心！以上是关于Zurb Foundation 顶部栏根本不工作的主要内容，如果未能解决你的问题，请参考以下文章
Zurb Foundation Joyride 根本没有出现