Django/Foundation CSS 手风琴不显示内容

Question

在我的 Django 模板中使用此处的示例代码时，手风琴内容 div 中的信息不会显示在屏幕上，但检查 HTML 显示它存在。 在我提供的代码中，我同时粘贴了手风琴的动态版本和示例代码副本，以显示两者都不起作用，但信息似乎已加载到网页中。 我可以提供更多信息，但我不确定什么是相关的，所以我只包括了我的 HTML 和网页截图。 Django 是否有可能干扰 Foundation CSS/JS？

底座.html

{% load static %}
<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="{% static 'css/foundation.css' %}">
        <link rel="stylesheet" href="{% static 'css/select2.css' %}">
        {% block css %}{% endblock %}
    </head>

    <body> <!--Need to fix top bar-->
        <div class="top bar">
            <div class="top-bar-left large-offset-1 medium-offset-1">
                
            </div>
            <div class="top-bar-right">
                <ul class="dropdown menu" data-dropdown-menu>
                    <li class="menu-text">Reading List Website</li>
                    {% if user.is_authenticated %}
                    <li><a href="/logout/">Logout</a></li>
                    {% else %}
                    <li><a href="/login/">Login</a></li>
                    {% endif %}
                  </ul>
                <ul class="menu">
                  {% if user.is_authenticated %}
                      {{ user.username }}
                  {% else %}
                      Guest
                  {% endif %}
                </ul>
              </div>
        </div>
        {% block content %}{% endblock %}
       
        {% block scripts %}
        <script src="{% static 'js/foundation.js' %}"></script>
        <script src="{% static 'js/vendor.js' %}"></script>
        <script src="{% static 'js/select2.js' %}"></script>
        {% endblock %}
    </body>

</html>

Book.html（截图中的网页）

{% extends "base.html" %}
{% load static %}

{% block title %} {{ Title }} {% endblock %}

{% block content %}

<div class="grid-x grid-padding-x">
    <div class="large-6 medium-6 small-12 large-offset-1 medium-offset-1 cell">
        <h3 class="text-left">{{ Title }}</h3> 
    </div>
    <div class="large-5 medium-5 small-12 cell">
        <p>{{ Author }}</p>
    </div>
    <div class="large-2 medium-2 large-offset-1 medium-offset-1 cell">
        <img src="{{Cover_Art}}" alt="Cover Art">
    </div>
    <div class="large-4 medium-4 cell">
        {% if AverageRating == 1 %}
            <p>Average Rating: <img src="{% static 'stars/1_stars.png' %}" alt="1 Star"  height="100" width="200"> ({{ NumRatings }})</p>
        {% elif AverageRating == 2 %}
            <p>Average Rating: <img src="{% static 'stars/2_stars.png' %}" alt="2 Star"  height="100" width="200"> ({{ NumRatings }})</p>
        {% elif AverageRating == 3 %}
            <p>Average Rating: <img src="{% static 'stars/3_stars.png' %}" alt="3 Star"  height="100" width="200"> ({{ NumRatings }})</p>
        {% elif AverageRating == 4 %}
            <p>Average Rating: <img src="{% static 'stars/4_stars.png' %}" alt="4 Star"  height="100" width="200"> ({{ NumRatings }})</p>
        {% elif AverageRating == 5 %}
            <p>Average Rating: <img src="{% static 'stars/5_stars.png' %}" alt="5 Star" height="100" width="200"> ({{ NumRatings }})</p>        
        {% endif %}
        <ul class="accordion" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
            {% for r in Reviews %}
            <li class="accordion-item is-active" data-accordion-item>
                <a href="#" class="accordion-title">{{r.Rating}} by {{r.ReviewOwner}}</a>
                <div class="accordion-content" data-tab-content>
                    <b>Content Warning: </b><p>{{r.ContentWarning}}</p>
                    <p>{{r.ReviewText}}</p>
                </div>
            </li>
        {% endfor %}
        </ul>
        <ul class="accordion" data-accordion>
            <li class="accordion-item is-active" data-accordion-item>
              <!-- Accordion tab title -->
              <a href="#" class="accordion-title">Accordion 1</a>
          
              <!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
              <div class="accordion-content" data-tab-content>
                <p>Panel 1. Lorem ipsum dolor</p>
                <a href="#">Nowhere to Go</a>
              </div>
            </li>
            <!-- ... -->
          </ul>
        
        
    </div>
    <div class="large-4 medium-4 cell">
        <p>UPC: {{ UPC }}</p>
        <p>Publisher: {{ Publisher }}</p>
        <p>Genres: {{ Genres }}</p> <!--maybe make this a list element-->
        <a href="{{PurchaseLink}}">Purchase Here</a>
    </div>
</div>

{% endblock %}
{% block scripts %}{% endblock %}