Question

我正在尝试使用以下的基础5代码。问题是内容是在负载下暴露的。我需要隐藏它直到被点击。我已经能够隐藏它，但它不会扩展。任何建议都将不胜感激。

谢谢

<div class="row">
    <div class="large-12 columns">
    <dl class="accordion" data-accordion>
       <dd class="accordion-navigation">
          <a href="#panel1b">XXXXXXXXS</a>
          <div id="panel1b" class="content active">
             Panel 1. 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

根据Foundation docs，类active用于显示相应的内容。因此，如果您不希望在页面加载时显示您的内容，请删除类active。此外，请确保保持HTML标记清洁。在您提供的示例中，我看到了许多无效标记，例如未关闭的标记。您的最终标记应如下所示：

<div class="row">
  <div class="large-12 columns">
    <dl class="accordion" data-accordion>
      <dd class="accordion-navigation">
        <a href="#panel1b">XXXXXXXXS</a>
        <div id="panel1b" class="content">Panel 1. 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>
  </div>
</div>

基础5手风琴暴露内容

1 个答案: