Django应用中Accordion手风琴功能异常：Active类无法添加及JS关联问题排查

我帮你梳理下问题所在，主要是JS加载时机不对和HTML结构里的script重复加载导致的，下面是具体的修复步骤：

1. 修正script标签的位置（避免重复加载+确保DOM就绪） #

你现在把<script>标签放在了for循环内部，这会导致每个循环迭代都加载一次app.js，不仅浪费资源，更关键的是当JS执行时，后续的.container元素还没渲染到页面上，自然无法绑定事件监听器。

把script标签移到整个模板的最底部（</body>标签之前），只加载一次：

{% load static %} 
{% for comp in comps %} 
<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 %}

<!-- 把script移到这里，确保所有DOM元素都渲染完毕后再加载JS -->
<script src="{% static 'main/app.js' %}"></script>

2. 确保JS在DOM完全加载后执行 #

即使把script移到底部，有时候也可能因为DOM还没完全就绪导致元素获取失败，给JS代码加上DOMContentLoaded监听，保证只有当整个HTML文档解析完成后才执行事件绑定：

document.addEventListener('DOMContentLoaded', function() {
  const accordions = document.getElementsByClassName('container'); 
  Array.from(accordions).forEach((accordion)=>{ 
    accordion.addEventListener('click', function() { 
      this.classList.toggle('active') 
    }) 
  })
});

3. 完善CSS的过渡效果（可选但重要） #

你的CSS里.content没有设置初始高度，切换active类时的transition不会生效，加上初始height: 0让过渡动画正常工作：

.accordion .content { 
  text-align: justify; 
  width: 780px; 
  overflow: hidden; 
  transition: 0.5s; 
  height: 0; /* 添加初始高度，让过渡生效 */
} 
.accordion .container.active .content { 
  height: 150px; 
}

做完这几步，点击手风琴的标签应该就能正常切换active类，展开/收起内容了。

内容的提问来源于stack exchange，提问作者prgpro