html - Foundation 5 带垂直标签的 Accordion

Question

我试图在 Foundation 5 的 Accordion 中添加垂直制表符。所以，我所做的只是从 http://foundation.zurb.com/docs/components/accordion.html 中复制了代码。并将标签类型更改为垂直:

<dl class="accordion" data-accordion>
  <dd>
    <a href="#panel1">Accordion 1</a>
    <div id="panel1" class="content active">
      <dl class="tabs vertical" data-tab>
        <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
        <dd><a href="#panel2-2">Tab 2</a></dd>
        <dd><a href="#panel2-3">Tab 3</a></dd>
        <dd><a href="#panel2-4">Tab 4</a></dd>
      </dl>
      <div class="tabs-content vertical">
        <div class="content active" id="panel2-1">
          <p>First panel content goes here...</p>
        </div>
        <div class="content" id="panel2-2">
          <p>Second panel content goes here...</p>
        </div>
        <div class="content" id="panel2-3">
          <p>Third panel content goes here...</p>
        </div>
        <div class="content" id="panel2-4">
          <p>Fourth panel content goes here...</p>
        </div>
      </div>
    </div>
  </dd>
  <dd>
    <a href="#panel2">Accordion 2</a>
    <div id="panel2" class="content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </dd>
  <dd>
    <a href="#panel3">Accordion 3</a>
    <div id="panel3" class="content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </dd>
</dl>

我得到的是:

知道为什么它不随选项卡缩放而是随文本缩放吗？？？以及如何修复它？

Answer 1

您需要调用脚本。

$(document).foundation();

http://fiddle.jshell.net/7Rp5C/3/
在此处查看 jsfiddle 示例:http://fiddle.jshell.net/7Rp5C/3/show/

提供的 CSS 在 Accordion 中使用垂直制表符时​​不会清除 float

清除 float :

.accordion .content { overflow: hidden; } 

或

.accordion .content:before,  
 .content:after {  
  content: " ";  
  display: table;  
}  
.accordion .content:after {  
   clear: both;  
}