/ / Responsywna zawartość kart na akordeon - akordeon zamyka się po kliknięciu tabulatorem - javascript, jquery, tabs, zurb-foundation, accordion

Responsywna zawartość kart na akordeon - akordeon zamyka się po kliknięciu tabulatorem - javascript, jquery, tabs, zurb-foundation, accordion

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 № 1

Dowiedz 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.