1

我正在使用 Zurb Foundation 4（最新版本），我正在尝试使用 tabs 进行布局，每个选项卡都包含一个带有手风琴布局的部分。基础部分文档和示例

标签：

<div class="section-container tabs" data-section="tabs">
  <section>
    <p class="title" data-section-title><a href="#">Section 1</a></p>
    <div class="content" data-section-content>
      <p>First Accordion-ed content goes here.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#">Section 2</a></p>
    <div class="content" data-section-content>
      <p>Second Accordion-ed content goes here.</p>
    </div>
  </section>
</div>

手风琴：

<div class="section-container accordion" data-section="accordion">
  <section>
    <p class="title" data-section-title><a href="#">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#">Section 2</a></p>
    <div class="content" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

我看到的结果是，每个部分（标签或手风琴）始终是一个标签，并且行为被破坏。

这与其他问题无关

我可以看到包含选项卡的选项卡示例，但没有一个包含混合部分的选项卡（例如，具有垂直导航的选项卡或具有水平导航的手风琴）。

任何人都可以让它工作吗？如果可能，不使用基础框架之外的其他工具。

提前感谢。

编辑：

请随时在此处或此处回复，我将交叉链接正确的回复。

编辑 2：在GitHub 上发现已提交的问题未解决。

4

1 回答 1

1

最后它的工作。

首先感谢@onecreative @codeZeilen 和@piercemoore 帮助解决这个问题

所以解决方案是：

  • 从github repo克隆最新版本
  • 移动到克隆仓库的本地副本
  • 创建一个css文件夹
  • 安装 sass/compass 以从最新的 scss 代码生成全新的 css。
  • 生成css文件：sass --watch scss/:css/

  • 添加修复：

    .accordion > section > .content { border: none !important; }

    .accordion > section.active > .content { display: block; position: relative;}

  • 保存并重新加载，一切就绪！

对于其他情况，例如在手风琴内嵌套手风琴，以及在 scss 级别正确修复的 scss hack和 jsfiddle 示例，例如这个工作示例等等；请参考github上的这个问题

于 2013-05-18T11:07:29.437 回答