javascript - 单击时切换进度条

Question

在下面的 plunker 中，单击第一个弹出窗口时，进度条应加载宽度:90%，如上所示。为此，我添加了一个 onClick 方法，该方法添加了一个 clicked 类，但它不起作用。

我已经将 materializecss 用于弹出功能。

我使用的简单 jQuery 是

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

Plunker 的链接是 here .

Answer 1

您的问题是内联样式 width: 0% 将始终覆盖样式表。这是因为 inline > class。

因此，将样式表中某处的宽度设置为 some1 的默认状态，然后它应该在切换时工作。

此外，您还需要先导入 jquery 才能正常工作。

请参阅下面的 Plunker:

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

切换有效，进度条使用 CSS3 动画和关键帧在 4 秒内设置从 0% 到 90% 的动画。