Question

在下面的plunker中，点击第一个弹出窗口，进度条应加载宽度：90％，如上所示。为此，我添加了一个onClick方法，该方法添加了一个单击的类，但它无效。

我已将materializecss用于弹出功能。

我使用的简单jQuery是

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

Plunker的链接是here。

Answer 1

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

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

您还需要首先导入jquery才能生效。

请参阅下面的Plunker：

切换工作正常，进度条使用CSS3动画和关键帧动画超过4秒，从0％到90％。

Answer 2

将脚本加载标记放在body的底部，并使用！important作为css类选择器。

.clicked {
  width: 90% !important;
}

对于HTML文件：

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

问题是脚本在文档甚至没有加载时运行完毕，并且！important用于覆盖已放置的宽度值：90％。希望它对你有所帮助。