Ustawiłem trzy kolumny, aby przejść na akordeon dla mniejszych ekranów. Używam metody zalecanej tutaj: Responsywna treść na akordeon
Mój problem polega na tym, że mam zawartość z kartami w środkujeden z akordeonów (za pomocą kart Fundacji), a po kliknięciu na jedną z kart, zamiast pokazywania zawartości tej karty, zamyka akordeon. Myślałem, że scenariusz (poniżej) pozwalał h3 tylko na przełączanie akordeonu, ale oczywiście nie. A może skrypt nadrzędny jest nadrzędny? Jakieś pomysły.
Oto skrypt akordeonowy:
$(function(){
var winIsSmall;
$(window).on("load resize", homeAccordion );
function homeAccordion() {
winIsSmall = window.innerWidth < 641;
$(".columns .mobslider").toggle(!winIsSmall);
}
$(".columns").find("h3").click(function () {
if(winIsSmall){
$(this).parent().find(".mobslider").stop().slideToggle();
}
});
});
Oto strona z problemem podczas wyświetlania na małym ekranie: http://www.easternflorida.edu/ Kliknij "Kalendarz", a następnie wybierz filtr zawartości kalendarza (np. Lekkoatletyka).
Dziękuje bardzo za Twój czas!
Odpowiedzi:
0 dla odpowiedzi № 1Dowiedz się, co się tutaj dzieje. Użyłem tutaj funkcji wywołania zwrotnego: https://github.com/zurb/foundation/issues/4611
Zmieniano rozmiar okna i spowodowało przełączenie elementów div, aby przywrócić stan domyślny.
Właśnie zmieniłem wywołanie zwrotne z tego:
$(document).foundation({
tab: {
callback : function (tab) {
$(window).trigger("resize");
}
}
});
do tego:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation("equalizer");
}
}
});
Dzięki temu ostatni komentator na tym stanowisku Fundacji.