物化css sidenav在django中不起作用答案

【问题标题】：Materialize css sidenav not working in django物化css sidenav在django中不起作用
【发布时间】：2020-12-21 10:25:32
【问题描述】：

我正在尝试从 django 中的物化 css 创建导航栏和 sidenav。创建了三个名为 mbase.html、navbar.html 和 sidenav.html 的主要 html 文件。下面分别是代码。

mbase.html:

    {%load materializecss %}
    {% load static %}
    
    <!DOCTYPE html>
    <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      <!--custom css for materialize-->
      <link rel="stylesheet" type="text/css" href= {% static 'css/style.css' %}>
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <!--Title of the page goes here-->
      <title>{% block title %}Hello World {% endblock title %}</title>
    </head>
    <body>
    {% include 'navbar.html' %}
    
    
    {% block body %}
    {% endblock body %}
      
      
      <!--Jquery optional-->
      <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
      <!-- Compiled and minified JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
      <script type="text/javascript" src={% static 'js/main.js' %}></script>

</body>

</html>

navbar.html:

{% load static %}
  
  <nav>
    <div class="nav-wrapper">
        <a href="#" data-target="slide-out" class="sidenav-trigger left show-on-large"><i class="material-icons">menu</i></a>
        <a href="{% url 'index' %}" class="brand-logo center">CMMS</a>
      
      <ul class="right hide-on-med-and-down">
        <!-- Dropdown Trigger for userprofile -->
        {% if request.user.is_authenticated %}
          <li><a id="userdropdown" class="dropdown-trigger" href="#!" data-target="dropdown2" >Hello, {{ request.user.email }}<i
          class="material-icons right">arrow_drop_down</i></a></li>
        {% else %}
          <li><a href="{% url 'login' %}">Login</a></li> | <li><a href="{% url 'registration' %}">Registration</a></li>
        {% endif %}
        
        <li><a href="{% url 'company' %}">Company</a></li>
        <li><a href="#">About Us</a></li>
        <!-- Dropdown Trigger for links dept wise -->
        <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Department<i
              class="material-icons right">arrow_drop_down</i></a></li>
      </ul>
    </div>
    <ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">E&M</a></li>
    <li><a href="#!">Finance</a></li>
    <li class="divider"></li>
    <li><a href="#!">Personnel</a></li>
  </ul>

  <ul id="dropdown2" class="dropdown-content">
    <li><a href="{% url 'logout' %}">Logout</a></li>
  </ul>
  </nav>

{% include 'sidenav.html' %}

sidenav.html：


    
  <ul id="slide-out" class="sidenav">
    <li><div class="user-view">
      <div class="background">
        <img src="images/office.jpg">
      </div>
      <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
      <a href="#name"><span class="white-text name">John Doe</span></a>
      <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
    </div></li>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
    <li><a href="#!">Second Link</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Subheader</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
  </ul>

在 main.js 中：

$(document).ready(function(){
    $('.sidenav').sidenav();
    // Initialize materialize data picker
    $('.datepicker').datepicker({'format': 'yyyy-mm-dd'});
    $('select').formSelect();
    // other functions to make it collapsible
    $('.collapsible').collapsible();
    $(".dropdown-trigger").dropdown();
    $("#userdropdown.dropdown-trigger").dropdown({coverTrigger: false});
    });

请帮帮我，我不知道为什么 sidenav 栏不起作用。

while inspect in browser it show like. while pressing the sidenav menu its not expand.

【问题讨论】：

如果有，请提供来自开发者工具的控制台错误。
为控制台错误上传的图像。请检查一下。

标签： html jquery css django materialize

【解决方案1】：

在 sidenav HTML 模板的开头使用以下代码：

{% extends 'mbase.html' %}

您的 CDN 未导入到您的导航 HTML 文件，因此此代码将帮助您继承页面

【讨论】：