带有垂直标签的 Foundation 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;  
}