首页 文章

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

提问于
浏览 次
1

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

我希望活动的手风琴项目呈现“已经打开”，但仍然保留用户点击另一个手风琴项目时的动画，或者在用户选择另一个项目然后选择原始项目的情况下保留最初打开的项目 .

我找不到任何css被用来做这个，所以也许它在javascript中的东西？如果是这样，我将如何重写这一点 .

任何关于如何实现这一点的建议将不胜感激！

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

zurb-foundation

2 回答

  • 1

    那里's no simple solution from what I know, but you can override some attributes on load so that the active item is displayed by default. You' d必须以手风琴开始，没有任何项目是活动的，即没有一个手风琴项目有 .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

    回复于
  • 2

    CSS Solution

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

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

    https://jsfiddle.net/r6jvbohu/

    回复于

相关问题