Foundation 5 Accordion - Prędkość przejścia? - javascript, html, css, css3, zurb-foundation

ja używam Podstawy 5 akordeonów na stronie internetowej. Działają, ale chcę zmienić szybkość przejścia. Obecnie, gdy klikniesz, natychmiast ukrywają jeden i pokazują drugie. Wolałbym, żeby się zmieniały, a pojawiałyby się natychmiast.

Próbowałem CSS, ale nie działało:

.accordion dd > a{
transition: all .5s;
}

Uwaga: Pomijam prefiksy dostawców.

Jak uzyskać płynne przejście?

Jeśli mogę to zrobić za pomocą czystego CSS, jest to preferowane, w przeciwnym razie JS będzie działać, ale nie jestem pewien jak?

Odpowiedzi:

Lynda, doceniam twój kod, w fundacji 5 panel pozostaje widoczny po drugim zamknięciu. Wydaje się być spowodowane przez jQuery dodawanie atrybutów stylu z przesuwania. Zmontowałem go, aby rozwiązać problem.

$(".accordion").on("click", "dd", function (event) {
if($(this).hasClass("active")){
$("dd.active").removeClass("active").find(".content").slideUp("fast");
}
else {
$("dd.active").removeClass("active").find(".content").slideUp("fast");
$(this).addClass("active").find(".content").slideToggle("fast");
}
});

Jak się okazuje, JS to sposób na zrobienie tego:

$(function() {
$(".accordion").on("click", "dd:not(.active)", function (event) {
$("dd.active").removeClass("active").find(".content").slideUp("fast");
$(this).addClass("active").find(".content").slideToggle("fast");
});
});

Możesz użyć tej struktury:

$(function() {
$(".accordion").on("click", "dd", function (event) {

$("div.active").slideUp(100).removeClass(".active");
$(this).find(".content").slideDown(100).addClass("active");

})
});

Działa poprawnie.

Oto rozwiązanie, które jest bardziej dogłębne z jQuery, jak również z wykorzystaniem .eq() specjalnie ukierunkować tylko na pierwszą (pozycja 0) a element kliknął przez wszystkie li elementy. Teoretycznie powinno to działać, jeśli dodasz multi_expand także konfiguracja, ponieważ dotyczy tylko pierwszego a element.

$(".accordion li").on("click", "a:eq(0)", function (event) {
var li_parent = $(this).parent();

if (li_parent.hasClass("active")) {
$(".accordion li div.content:visible").slideToggle("normal");
} else {
$(".accordion li div.content:visible").slideToggle("normal");
$(this).parent().find(".content").slideToggle("normal");
}
});

Kredyt trafia do Nemanja Andrejevica na forach Fundacji. Uwaga: to używa znaczników Foundation 5.5. Jeśli używasz poprzednich wersji, po prostu zamień wszystkie zastosowania li z dd.