在基础上的标签内使用手风琴答案

【问题标题】：using accordion inside tabs on foundation在基础上的标签内使用手风琴
【发布时间】：2023-03-26 16:20:01
【问题描述】：

我正在使用 Zurb Foundation 4（最新版本），我正在尝试使用 tabs 进行布局，每个选项卡都包含一个带有手风琴布局的部分。 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>

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

这与其他question无关

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

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

提前致谢。

编辑：

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

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

【问题讨论】：

你需要哪一个？选项卡内的手风琴？
是的！ @vonv。对不起我的英语，我需要标签，每个标签都在里面显示一个手风琴。

标签： tabs accordion zurb-foundation

【解决方案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

【讨论】：