在基礎上使用手風琴內標籤

我正在與Zurb基金會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>

結果我看到的，是每個部分（標籤ö手風琴）始終是一個選項卡，和正常的行爲。

此心不是與該其他question

相關的I可以看到含有選項卡的選項卡的例子，但沒有一個具有混合部（卡口與垂直-NAV，或手風琴具有水平-NAV，例如）。

任何人都可以使它工作？如果可能的話，不要使用基礎框架以外的其他工具。

感謝提前。

編輯：

，請隨時點擊這裏回覆或here我會交聯正確的響應。

編輯2：發現已提交的問題在GitHub未解決。

來源

2013-05-12 jfunez

您需要哪一個？選項卡內的手風琴？ – 2013-05-12 08:29:50

是的！ @vonv。對不起，我的英語，我需要標籤，每個標籤，裏面顯示一個手風琴。 – jfunez 2013-05-12 08:32:25

最後它的工作。

一切都歸功於首先要@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

來源

2013-05-18 11:07:29 jfunez

在基礎上使用手風琴內標籤

回答

相關問題