在页面加载时删除手风琴幻灯片动画

Question

当我的页面加载时，活动手风琴项目滑动打开，导致页面上的其他元素也移动一秒钟。

我希望呈现活动的手风琴项目 "already opened"，但仍保留用户单击另一个手风琴项目时的动画，甚至是用户选择其他项目时最初打开的项目然后是原版。

我找不到任何用于执行此操作的 css，所以它可能在 javascript 中？如果是这样，我将如何覆盖它。

如有任何关于如何实现此目的的建议，我们将不胜感激！

基础手风琴：http://foundation.zurb.com/sites/docs/accordion.html

Answer 1

据我所知，没有简单的解决方案，但您可以在加载时覆盖某些属性，以便默认显示活动项目。您必须从手风琴开始 none 的项目是活动的，即 none 的手风琴项目具有 class 的 .is-active:

Html:

<ul class="accordion" data-accordion data-allow-all-closed='true'>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content>
      Panel 1. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 2</a>
    <div class="accordion-content" data-tab-content>
      Panel 2. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 3</a>
    <div class="accordion-content" data-tab-content>
      Panel 3. Lorem ipsum dolor
    </div>
  </li>
</ul>

jQuery:

//Initialise the Foundation plugins
$(document).foundation();

function activateWithoutAnimation(itemIndex) {
  //Get the accordion item according to its index (0 based)
  var $accordionItem = $('.accordion-title:eq(' + itemIndex + ')');
  //Set the aria attributes of the accordion item you want to appear
  $accordionItem.attr('aria-expanded', 'true');
  $accordionItem.attr('aria-selected', 'true');
  //Set the attributes of the content.
  $accordionItem.next().attr('aria-hidden', 'false');
  $accordionItem.next().css('display', 'block');
  //This is essential as it lets foundation know that the item is active (to re-allow toggling)
  $accordionItem.trigger('click');
}

//Call the function.
activateWithoutAnimation(0);

可能有更好的方法来执行上述操作，但根据我的阅读，没有允许禁用动画的选项。我已经尝试覆盖 Foundation 提供的默认值但无济于事。

Fiddle Demo

Answer 2

CSS解法

如果在初始加载时使用默认助手 class .is-active 那么一些简单的 css 可以消除幻灯片打开动画。

.is-active .accordion-content {
  display: block;
}

https://jsfiddle.net/r6jvbohu/

Answer 3

仅

CSS（不丢失动画）

要始终立即打开第一个项目同时仍然保持动画效果，您可以使用以下代码。

.accordion-item:first-of-type .accordion-content {
    display: block;
}

第一项仍应具有 .is-active class 以保持一致，但这会删除初始动画，因为我们将显示值从 none 覆盖为块。当点击另一个 accordion item 时，JS 仍然覆盖这个状态，导致我们想要保留的动画。

在页面加载时删除手风琴幻灯片动画

Remove accordion slide animation on page load

zurb-foundation