/ / Akkordeon-Folienanimation beim Laden der Seite entfernen - zurb-foundation

Entfernen Sie Akkordeon Folie Animation beim Laden der Seite - zurb-foundation

Wenn meine Seite die aktiven Akkordeon-Objektträger lädt, werden die anderen Elemente auf der Seite ebenfalls für eine Sekunde verschoben.

Ich würde gerne den aktiven Akkordeongegenstand rendern"bereits geöffnet", aber immer noch die Animation für den Fall, dass ein Benutzer auf ein anderes Akkordeonelement klickt, oder sogar das ursprünglich geöffnete Element in Fällen, in denen der Benutzer ein anderes Element und dann das Original auswählt.

Ich kann keine CSS finden, um dies zu tun, also vielleicht seine etwas im Javascript? Wenn ja, wie würde ich darüber hinweggehen?

Irgendwelche Vorschläge, wie dies zu erreichen wäre, würde sehr geschätzt!

Grundakkordeon: http://foundation.zurb.com/sites/docs/accordion.html

Antworten:

2 für die Antwort № 1

Es gibt keine einfache Lösung von dem, was ich weiß, aberSie können einige Attribute beim Laden überschreiben, so dass das aktive Element standardmäßig angezeigt wird. Du solltest mit einem Akkordeon beginnen, keiner der Gegenstände ist aktiv, d. H. Keine Akkordeon Gegenstände haben eine Klasse von .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);

Es könnte einen besseren Weg geben, das oben genannte zu tun, aberNach dem, was ich gelesen habe, gibt es keine Option, mit der die Animation deaktiviert werden kann. Ich habe versucht, die Standardeinstellungen außer Kraft zu setzen, die Foundation zur Verfügung stellt.

Geigen-Demo


1 für die Antwort № 2

CSS-Lösung

Wenn die Standard-Helper-Klasse verwendet wird .is-active Beim initialen Laden kann dann ein einfaches CSS die Slide Open Animation eliminieren.

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

https://jsfiddle.net/r6jvbohu/