Question

我正在使用Zurb Foundation 4（最新版本），我正在尝试使用选项卡进行布局，每个选项卡都包含一个带有手风琴布局的部分。 foundation sections docs and examples

标签：

<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>

我看到的结果是，每个部分（tab of accordion）总是一个标签和破坏的行为。

这与其他question

无关

我可以看到包含标签的标签示例，但没有一个具有混合部分的标签（例如，带有vertical-nav的标签，或者带有水平导航的手风琴）。

有人能让它发挥作用吗？如果可能的话，不使用基础框架之外的其他工具。

非常感谢。

编辑：

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

编辑2：已发现问题已在GitHub尚未解决。

Answer 1

最后它正在运作。

首先感谢@onecreative @codeZeilen和@piercemoore帮助issue

所以解决方案是：

克隆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 hack to properly fix at scss level和jsfiddle示例，like this one working example等等;请参阅github上的issue

在地基上使用手风琴

1 个答案: