我在尝试让Zurb的Foundation Topbar在手机屏幕上工作时遇到了麻烦。
我正在测试镀铬，屏幕宽度设置为最小。加载所有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" alt="" 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" width="100" alt="" 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>
答案 0 :(得分：9)
尝试将foundation()来电包裹在jQuery(document).ready()函数中，如下所示：
<script>
jQuery(document).ready({
jQuery(document).foundation();
});
</script>
那可能不是问题...但是我想知道你的DOM是否在JS有机会完全加载之前或之后加载，因为你正在加载你的JS。
接下来，您可能会错过基础 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（与所有基础插件一样）。
接下来，您打算如何对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>
如果您检查生成的内容，我打赌您错过了"has-dropdown"上的<li>课程以及"dropdown"上的<ul>课程1}}。
<强> [编辑]
我还注意到您在问题中编辑了标记，现在有两个<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>
如果 有效，那么请重新检查自己的标记，比较＆amp;对比什么类和元素和嵌套可能不同，然后相应地调整您的代码。用他们的例子开始可能更容易，然后从那里进行调整。