Materialize可折叠功能不适用于Django

Question

我正在学习django并且目前使用物化作为框架来保持简单。我的问题是可折叠功能会创建标题但单击时不会展开。

这是ul片段

<ul class="collapsible" data-collapsible="accordion">
  <li class="collapsible-header"><i class="fas fa-book"></i> &nbsp; Ingegneria <div class="collapsible-body">
    <p>Al momento (e nei prossimi anni probabilmente) frequento </br>ingegneria dell'automazione</br> a Bologna. Studiare prende la maggior parte del mio tempo
e nel caso non fossi rintracciabile probabilmente mi trovo nell'acquario: l'aula studio principale della sede di via Terracini.
    </p>
    </div>
  </li>
  <li class="collapsible-header"><i class="fas fa-microphone"></i> &nbsp; Stand-Up Comedy <div class="collapsible-body">
    <p>Ora vi starete dicendo "questo ragazzo non sa neanche cosa sia una vita sociale". </br>
      Ed in parte è vero, ma un giovedì ogni due settimane esco dalla mia grotta e insieme agli altri comici di
</br>stand-up italia</br> partecipo all'open mic presso il Brewdog bar.</p>
  </div>
  </li>
</ul>

这是我的头颅片

  {% load staticfiles %}
  
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Filippo Guarda</title>
  <!-- css -->
  <link rel="stylesheet" href="{% static 'webapp/css/materialize.css' %}" type="text/css" media="screen" />
  
  <script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- javascript -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="{% static 'webapp/js/materialize.js' %}"></script>

我尝试添加

$(document).ready(function(){
  $('.collapsible').collapsible();
});

但它似乎没有用

Answer 1

根据documentation，语法是：

<ul class="collapsible" data-collapsible="accordion">
  <li>
    <div class="collapsible-header"><i class="fas fa-book"></i> &nbsp; Ingegneria</div
    <div class="collapsible-body"><p>text</p></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="fas fa-microphone"></i> &nbsp; Stand-Up Comedy</div>
    <div class="collapsible-body"><p>text</p></div>
  </li>
</ul>