Fondazione 5 Fisarmonica - Velocità di transizione? - javascript, html, css, css3, zurb-foundation

sto usando Fondazione 5 fisarmoniche su un sito Web. Funzionano ma voglio cambiare la velocità di transizione. Attualmente quando fai clic, ne nascondono immediatamente uno e mostrano l'altro. Preferirei la transizione vs comparire all'istante.

Ho provato CSS ma non ha funzionato:

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

Nota: sono stato omesso il prefisso del venditore.

Come faccio a farli transitare senza problemi?

Se posso farlo con CSS puro, questo è preferito, altrimenti JS funzionerà, ma non sono sicuro di come?

risposte:

Lynda, ho apprezzato il tuo codice, nella fondazione 5, il pannello rimane visibile dopo la seconda chiusura. Sembra essere causato da jQuery che aggiunge gli attributi di stile dallo scorrimento. L'ho modificato per risolvere il problema.

$(".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");
}
});

A quanto pare, JS è il modo per farlo:

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

Puoi usare questa struttura:

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

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

})
});

Funziona correttamente.

Ecco una soluzione che è un po 'più approfondita con jQuery, così come l'utilizzo .eq() per mirare in modo specifico solo al primo (posizione 0) a elemento cliccato attraverso tutto il li elementi. In teoria, questo dovrebbe funzionare se si aggiunge il multi_expand anche la configurazione, perché mira solo al primo a elemento.

$(".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");
}
});

Il merito va a Nemanja Andrejevic sui forum della Fondazione. Nota: questo sta usando il markup di Foundation 5.5. Se stai usando versioni precedenti, sostituisci solo tutti gli usi di li con dd.