класс переключения (JS) в Internet Explorer 7

Question

У меня ошибка, которая сводит меня с ума.Я уже пробовал так много способов, но, похоже, ничего не работает, возможно, у вас есть решение.

Наша интрасеть имеет 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>

Кажется, что класс дисплея и блока никогда не меняется.Я уже пробовал так много обходных путей.

Вместо acc[i].onClick()... я попробовал addEventListener() -функцию.Кажется, это не поддерживается в IE <8. Затем я попытался использовать <code>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 не работает в IE7 , но вы можете использовать className.

Чтобы добавить имя класса 'active':

element.className += ' active';

Убедитесьесть пробел, чтобы избежать перезаписи предыдущего класса.

Чтобы удалить имя класса:

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

При повторном переключении вы можете столкнуться с двойными пробелами в вашем списке классов, так что держите его аккуратноделая что-то вроде этого:

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