Akordeon slayt animasyonunu sil sayfa

Question

Sayfanın aktif akordiyon öğesi slaytları açıldığında, sayfanın diğer öğelerinin de bir saniyeliğine hareket etmesine neden olur.

Aktif akordeon öğesinin "zaten açılmış" hale getirilmesini istiyorum, ancak bir kullanıcının başka bir öğeyi tıklattığı zamanki animasyonu veya kullanıcının başka bir öğeyi seçtiği durumlarda orijinal açılmış öğeyi bile tutmasını istiyorum orijinal.

Bunu yapmak için kullanılan bir css bulamıyorum, belki de javascript içindeki bir şey? Eğer öyleyse, bunu nasıl geçersiz kılmaya çalışırdım.

Bunun nasıl gerçekleştirileceğine dair herhangi bir öneri çok takdir edilecektir!

Vakfı Akordeon: http://foundation.zurb.com/sites/docs/accordion.html

Answer 1

Hiçbir basit bir çözüm bildiklerimi gelen, ama aktif madde varsayılan olarak görüntülenir, böylece yükleme sırasında bazı özelliklerini geçersiz kılabilir.

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); 

Sen akordeon öğelerin aktif yani hiçbiri .is-active bir sınıf var olan öğelerin bir akordeon hiçbiri ile başlayan olurdu

Yukarıdakileri gerçekleştirmenin daha iyi bir yolu olabilir, ancak okuduğumdan, animasyonun devre dışı bırakılmasına izin veren seçenek yoktur. Vakfın hiçbir fayda sağlamadığı varsayılanları geçersiz kılmaya çalıştım.

Fiddle Demo

Answer 2

CSS Çözüm

sonra bazı düz css slayt açık animasyon ortadan kaldırabilir ilk yüklemede varsayılan yardımcı sınıf .is-active kullanılıyorsa.

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

https://jsfiddle.net/r6jvbohu/