刪除頁面加載時的手風琴幻燈片動畫

Question

當我的頁面加載活動手風琴項目幻燈片打開導致頁面上的其他元素也移動一秒鐘。

我希望活躍的手風琴項目呈現「已經打開」，但仍保留用戶點擊另一手風琴項目時的動畫，或者在用戶選擇另一項目的情況下甚至保留最初打開的項目原本的。

我無法找到任何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/