Ich verwende derzeit den folgenden Code, der großartig funktioniert. Allerdings habe ich ein paar Probleme / Einschränkungen, die mich denken lassen, dass es angemessener wäre, den jQuery UI-Faltungseffekt anstelle der js animate-Funktion zu verwenden.
Da ich mit JS nicht sehr vertraut bin, könntest du mir bitte helfen, den folgenden Code anzupassen, um den jQuery UI-Faltungseffekt anstatt der Animate-Funktion zu verwenden? Vielen Dank
JS:
%Vor%Ihr Code ist ziemlich nah an dem, was Sie brauchen. Ich denke, das Hauptproblem ist Ihre Stile und verstehen, wie sie mit dem Effekt interagieren.
Der Faltungseffekt zeigt oder versteckt Elemente basierend auf ihrem aktuellen Status. Sie haben die Klasse .fold , die Ihre divs mit 0x0 Pixel startet und versteckt, aber was Sie wirklich wollen, ist eine Regel, die beschreibt, wie Ihre divs aussehen, wenn sie Ihren Benutzern angezeigt werden.
Original:
%Vor%Korrigiert:
%Vor% Da dein .fold Stil jetzt den Endzustand deiner divs beschreibt, hat er keine display: none; Regel mehr. Da die divs zunächst verborgen sein sollen, sollten Sie etwas Javascript hinzufügen, um diese anfangs zu verbergen:
Anstatt Stile manuell zu animieren, können Sie nun den Faltungseffekt verwenden:
Original:
%Vor%Aktualisiert:
%Vor% Nun, da alles funktioniert, denke ich, dass du mit einigen Einstellungen spielen willst. Die Dokumentation für den Faltungseffekt zeigt, dass Sie die Größe Ihres Elements sowohl beim Zusammenfalten als auch beim Falten einstellen können Reihenfolge der Faltung. Um den von Ihnen geposteten Link nachzuahmen, würde ich size auf 5 setzen, da Ihre divs einen 5px-Rahmen haben. Ich würde auch horizFirst auf true setzen, da dies das ist, was Ihr Beispiel zeigt.
Ich habe mich auch dafür entschieden, toggleClass anstelle von addClass("active") und removeClass("active") zu verwenden. Dies führte zu einfacheren Einstellungen.
Hier ist das fertige Produkt:
%Vor%Bearbeiten :
Das hat mich sehr viel Zeit gekostet, weil ich ein seltsames CSS-Verhalten hatte. Das Problem war also diese Regel, die ich entfernt habe:
%Vor%Und die Lösung ist hier: Ссылка
%Vor%Tags und Links javascript html jquery css