Проблема функциональности аккордеона Java Script

Я делаю приложение на django, которому нужен аккордеон. Это следующий HTML код

{% load static %}
{% for comp in comps %}


<script src="{% static 'main/app.js' %}"></script>

<div class="accordion-body">
    <div class="accordion">

    <div class="container">
        <div class="label">
        {{comp.name}}
        {{comp.country}}, {{comp.city}}
        </div>

        <div class="content">{{comp.descr}}</div>
        <hr>

    </div>

  </div>

</div>
{% endfor %}
< 
.accordion .label::before {
    content: '+';
    top: 50%;
    transform: translateY(-50%);
  }
  
  
  .accordion .content {
    text-align: justify;
    width: 780px;
    overflow: hidden;
    transition: 0.5s;
  }

  .accordion .container.active .content {
    height: 150px;
  }

Наконец, это javascript, который предназначен для добавления слушателя событий

const accordion = document.getElementsByClassName('container');

accordion.addEventListener('click', function () {
this.classList.toggle('active')
})

Не добавляется активный класс. Возможно, есть проблема со связыванием js с HTML-документом, поскольку когда я запускаю приложение, вот что я получаю в командной строке. GET /static/main/app.js HTTP/1.1 Расположение определенно правильное

getElementsByClassName возвращает список элементов.

let containers = document.getElementsByClassName('container');

for(let i = 0; i < containers.length; i++) {
  containers[i].addEventListener("click", function() {
    this.classList.toggle('active')
  })
}

В настройке исходного кода следует обратить внимание на несколько моментов, каждый из которых необходимо обработать.

  • Ваш тег <script>... находится внутри цикла django {% for ... %}, что означает, что один и тот же скрипт загружается несколько раз (в зависимости от размера вашего comp). Переместите ваш <script>... из цикла. Это также предотвратит ошибки множественного объявления, например accordions has already been declared.

  • Ваш тег <script>... загружается до div класса container, а скрипт не ждет загрузки документа, поэтому ваш document.getElementsByClassName('container') все равно ничего не получит. Попробуйте добавить вызов этой функции в слушатель события загрузки документа в вашем скрипте, или расположите загрузку скрипта в нижней части вашего html кода (предпочтительно после container class div).

  • Переменная accordion представляет собой список, а не один объект HTMLElement. Поэтому addEventListener('click'... не сработает. Попробуйте следующее

...
const accordions = document.getElementsByClassName('container');

Array.from(accordions).forEach((accordion)=>{
   accordion.addEventListener('click'...//rest of your code
   ...
})
...
  • Вы не включили таблицу стилей в html (если вы убрали эту часть только здесь, то все в порядке).

Могут быть и другие проблемы, кроме тех, которые я заметил в предоставленном вами коде. Но эти пункты должны помочь и вам.

Вернуться на верх