クリック時に進捗バーを切り替えます

下のプランナーでは、最初のクリックでポップアウトが表示され、プログレスバーは上記のように幅：90％で読み込まれます。これを行うために、クリックされたクラスを追加するonClickメソッドを追加しましたが、それは機能しません。クリック時に進捗バーを切り替えます

ポップアウト機能のためにmaterializecssを使用しました。

私が使用したシンプルなjQueryのはPlunkerへのリンクがhereある

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

です。

私のために働いて、あなたのplnkrをチェックしました。 'それは働いていません。 –

最初のポップアウトの内側に、最初にクリックしたときに進捗が90％まで上昇するはずです –

インラインスタイルwidth: 0%は常にスタイルシートを上書きします。これは、inline > classです。

したがって、スタイルシートの幅をデフォルト状態のsome1に設定し、切り替えたときに機能するはずです。

また、jqueryをインポートする必要があります。トグル作品

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

とプログレスバーが90％、0％から4秒を超えるアニメーション化するCSS3アニメーションとキーフレームを使用しています：

は、以下のPlunkerを参照してください。

2017-03-27 22:11:41

plnkrを更新できますか？ –

新しいplnkrが回答に追加されました。 –

bodyの下にスクリプト読み込みタグを置き、cssクラスセレクタに！importantを使用します。

.clicked { 
    width: 90% !important; 
}

とHTMLファイルを：！

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

問題は文書にもアップロードされていなかった、重要なは、あなたのすでに置かれた値を上書きするために使用されている場合、スクリプトの実行が行われることです幅：90％。それがあなたを助けたことを願っています。

2017-03-27 22:17:10 DomainFlag

もう1つの質問どのようにクリックして進行状況バーの移行を追加することができます私は助けることができます –

私は進行状況バーが0から90％をロードする必要がありますを意味します –

私はこれを解決しました。私の答えを見てください。 –

答えて