基础5手风琴与垂直标签

Question

我试图在Foundation 5中手风琴添加垂直标签。所以，我做了什么，我只是从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 .content { overflow: hidden; } 

或

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