Question

我正在基础6中完成我的第一个项目，并且无法使响应式导航工作。我开始使用Foundation附带的基本页面模板（使用CodeKit安装F6），然后我完全按照http://foundation.zurb.com/sites/docs/responsive-navigation.html#responsive-toggle显示的方式粘贴在响应式菜单代码中，但是当在小屏幕尺寸下查看时，会出现“菜单”一词，但点击它什么都不做。

向下钻取响应式菜单也不起作用 - 粘贴在向下钻取菜单代码中（第二个示例向下，在上面引用的页面上），显示的是一长串链接，没有任何内容折叠，没有任何内容滑入。必须是一个缺少的脚本但我已经加载了三重检查和app.js，foundation.js和jquery脚本。我还缺少什么？

Answer 1

首先抱歉我的英语不好，你初步确定了基础的javascript吗？这可以通过自定义javascript文件中的以下代码完成：

    $(document).foundation();

我是这样用jQuery做的：

$(document).ready(function() {
    $(document).foundation();
});

有关详细信息，请参阅：Foundation-6 documentation - initializing

请检查您是否拥有基础文件的正确文件结构，请参阅以下文档：Foundation-6 documentation - File Structure

Answer 2

tl; dr：gulp.babel.js文件中的purifycss configuartion错误。

我也有这个问题。我的设置：

我可以使用选项卡输入响应式下拉菜单，然后输入密钥。这意味着正确加载了相关的js文件。导航'汉堡'也不会出现。

使用chrome dev工具检查基金会网站上的响应式下拉菜单示例时，我注意到<button class="menu-icon" type="button" data-toggle=""></button>的样式受到来自scss partial的.menu-icon CSS规则的影响，_menu- icon.scss。我的不是。当我查看时， app / 中的 foundation.scss 文件具有完全相同的样式规则。已转换的 foundation.css 是从 .tmp / 文件夹提供的，但没有.menu-icon CSS规则。然后我再次怀疑purifycss（之前我已经从gulp文件中注释掉了，忘了重置gulp服务，看不到修复，从而错误地从嫌疑人名单中排除了purifycss规则）。

我将我的gulp styles任务设置为：

gulp.task('styles', () => {
  return gulp.src('app/styles/*.scss')
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.sass.sync({
      outputStyle: 'expanded',
      precision: 10,
      includePaths: ['.']
    }).on('error', $.sass.logError))
    .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
    /*Stupidly assumed that purifycss supported jade files as src files*/
    .pipe($.purifycss(['app/**/*.js', 'app/*.jade']))
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('.tmp/styles'))
    .pipe(reload({stream: true}));
});

这意味着删除了必要的样式（包括.menu-icon）。我想我会使用stylperjade或重新安排任务，以便我可以这样做：.pipe($.purifycss(['app/**/*.js', '.tmp/*.jade'])) \

如果这也是您的解决方案，请告诉我

Foundation 6 Responsive切换导航无法正常工作

2 个答案: