Question

我有一个错误，这使我发疯。我已经尝试了很多方法，但是似乎没有任何效果，也许您有解决方案。

我们的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将是一个不错的好处，但不是强制性的。

Answer 1

classList doesn't work in IE7，但您可以使用className。

要添加类名称“ active”：

element.className += ' active';

确保有足够的空间来避免覆盖上一类。

要删除类名：

element.className = element.className.replace('active', '');

反复切换可能会在班级列表中遇到双倍空格，因此请执行以下操作使其整洁：

element.className = element.className.replace(/  /g, ' ');

Internet Explorer 7中的切换类（JS）

1 个答案: