Question

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

我希望活动的手风琴项目能够呈现＆＃34;已经打开＆＃34;，但仍然保留用户点击另一个手风琴项目的动画，或者甚至保留最初打开的项目的动画用户选择另一个项目，然后选择原始项目。

我找不到任何用于执行此操作的CSS，所以也许它在javascript中的某些东西？如果是这样，我将如何重写这一点。

非常感谢任何关于如何实现这一目标的建议！

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

Answer 1

根据我所知，没有简单的解决方案，但您可以在加载时覆盖某些属性，以便默认显示活动项。您必须从手风琴开始，没有任何项目是活动的，即没有一个手风琴项目有.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);

可能有更好的方法来做到这一点，但从我读过的内容来看，没有允许动画被禁用的选项。我试过覆盖基金会提供的默认值无济于事。

<强> Fiddle Demo

Answer 2

CSS解决方案

如果在初始加载时使用默认助手类.is-active，那么一些普通的CSS可以消除幻灯片打开动画。

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

https://jsfiddle.net/r6jvbohu/

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

2 个答案: