Schalten Sie einen Fortschrittsbalken bei Klick ein

Im unteren Bereich, nach Klicken auf den ersten kommt der Popout und der Fortschrittsbalken sollte mit der Breite laden: 90% wie oben gezeigt. Dazu habe ich eine onClick-Methode hinzugefügt, die eine Klasse hinzufügt, aber nicht funktioniert.Schalten Sie einen Fortschrittsbalken bei Klick ein

Ich habe die materializecss für popout-Funktionalität verwendet.

Die einfache jQuery Ich verwendete

$('.h_first').on('click', function() { 
    $('.some1').toggleClass('clicked'); 
});

Der Link zu Plunker here ist.

Quelle

2017-03-27 Ramana Uday

Arbeitete für mich, ich überprüfte Ihre PLNKR. Bitte erläutern Sie "es funktioniert nicht". –

Innerhalb des ersten Popouts sollte der Fortschritt bis zu 90% auf Klick von zuerst laden –

Ihr Problem ist, dass der Inline-Stil width: 0% immer das Stylesheet überschreibt. Dies liegt daran, inline > class.

Daher die Breite im Stylesheet irgendwo als Standard-Zustand für some1 und dann sollte es funktionieren, wenn umgeschaltet.

Auch Sie müssen zuerst jquery importieren, damit dies funktioniert.

Siehe Plunker unter:

https://plnkr.co/edit/Y8F32jWxtnzr8zzZpmEa?p=preview

Die Toggle-Arbeiten und die Fortschrittsbalken verwenden CSS3-Animationen und Keyframes 4s von 0% bis 90% zu animieren über.

Quelle

2017-03-27 22:11:41

Können Sie die PLNKR aktualisieren –

Ich habe ein neues PLNKR der Antwort hinzugefügt und es hat jetzt animierte Fortschrittsbalken. –

Setzen Sie Skript laden Tags am unteren Rand des Körpers, und verwenden Sie die! Wichtig für Ihre CSS-Klassenselektor.

.clicked { 
    width: 90% !important; 
}

Und für HTML-Datei:

<body> 
... 
<script src="script.js"></script> 
</body>

Das Problem ist, dass das Skript ausgeführt wird durchgeführt, wenn das Dokument nicht einmal geladen und die wichtigen verwendet wird Ihren bereits platziert Wert außer Kraft zu setzen! Breite: 90%. Hoffe, dass es dir geholfen hat.

Quelle

2017-03-27 22:17:10 DomainFlag

eine weitere Frage wie kann ich Übergang von Fortschrittsbalken auf den Klick hinzufügen können Sie mir helfen –

Ich meine, auf klicken Sie auf den Fortschrittsbalken sollte von 0 bis 90% laden –

Ich habe das gelöst. Siehe meine Antwort. –

Schalten Sie einen Fortschrittsbalken bei Klick ein

Antwort

Verwandte Themen