0

我在 Foundation 6 中做我的第一个项目，但无法让响应式导航正常工作。我从 Foundation 附带的基本页面模板开始（使用 CodeKit 安装 F6），然后我将响应式菜单代码粘贴到此处http://foundation.zurb.com/sites/docs/responsive-navigation.html#响应式切换 ，但在小屏幕尺寸下查看时，会出现“菜单”一词，但单击它什么也不做。

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

4

2 回答 2

3

首先对不起我的英语不好，你初始化了基金会的javascript吗？这可以通过您的自定义 javascript 文件中的以下代码来完成：

    $(document).foundation();

我用 jQuery 这样做：

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

有关更多信息，请参阅：Foundation-6 文档 - 初始化

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

于 2016-01-14T09:21:16.467 回答
0

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

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

我可以通过使用选项卡和输入键来使响应式下拉菜单工作。这意味着相关的js文件正在正确加载。导航“汉堡”也没有出现。

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

我像这样设置我的 gulp 样式任务：

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']))\

让我知道这是否也是您的解决方案

于 2016-03-22T12:43:06.677 回答