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

2 回答

• 3

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

  $(document).foundation();
  

  我是这样用jQuery做的：

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

  有关更多信息，请参阅：Foundation-6 documentation - initializing

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

  回复于 2024-05-02T12:51:36+08:00
• 0

  tl;dr: Faulty purifycss configuartion in the gulp.babel.js file.

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

  • generator-webapp

  • webapp's jade recipe

  我可以通过使用选项卡并输入密钥来使响应下拉菜单工作 . 这意味着正确加载了相关的js文件 . 导航'汉堡'也不会出现 .

  在使用chrome dev工具检查基础网站上的响应下拉菜单示例时，我注意到 <button class="menu-icon" type="button" data-toggle=""></button> 的样式受到来自scss partial，_menu-icon.scss的 .menu-icon CSS规则的影响 . 我的不是 . 当我查看时， 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'])) \

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

  回复于 2024-05-02T12:51:36+08:00