我有一个错误,这使我发疯。我已经尝试了很多方法,但是似乎没有任何效果,也许您有解决方案。
我们的Intranet具有IE配置,因此应在IE7中运行。现在有一个任务,就是为我们的某些内容站点创建类似手风琴的效果。
我的HTML看起来像这样(只是简短的摘要)
<button class="accordion">Wie erfolgt die Auswertung?</button>
<div class="panel">
<p><span style="font-size: 10pt; line-height: 115%">Jede Einheit, für die ausreichend ausgefüllte Fragebögen vorliegen, wird ausgewertet. Darüber hinaus fließen die Ergebnisse in die Auswertung der nächst höheren Ebenen ein.</span></p>
<p><span style="font-size: 10pt; line-height: 115%">Einheiten, bei denen das nicht der Fall ist, erhalten keine eigene Auswertung. Hier fließen die Antworten direkt in die nächsthöhere Ebene ein.</span></p>
</div>
,我的JS看起来像这样(相同的文件)
<script>
var acc = $(".accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onClick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
似乎display和block类从未改变。我已经尝试了很多解决方法。
我尝试使用acc[i].onClick()...
函数而不是addEventListener()
。 IE <8中似乎不支持此功能。
然后我尝试使用attachEvent()
-仍然没有效果。
我尝试添加以下元数据:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
没有效果。我什至尝试添加这样的解决方法:
<!--[if IE 8]>
<script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.6/ie8.js"></script>
<![endif]-->
也没有帮助。我不再在控制台中收到任何错误消息,但这也没有弹出。当我检查圆顶时,什么都没有改变。
有什么想法吗?它只是不必在IE7中工作-Chrome将是一个不错的好处,但不是强制性的。
答案 0 :(得分:1)
classList doesn't work in IE7,但您可以使用className
。
要添加类名称“ active”:
element.className += ' active';
确保有足够的空间来避免覆盖上一类。
要删除类名:
element.className = element.className.replace('active', '');
反复切换可能会在班级列表中遇到双倍空格,因此请执行以下操作使其整洁:
element.className = element.className.replace(/ /g, ' ');