如何使用物化css将移动折叠navarro添加到Django?

2024-05-20 16:24:57 发布

您现在位置:Python中文网/ 问答频道 /正文

我在添加导航栏时遇到一些问题,当移动设备处于拆分视图时,导航栏会折叠成“汉堡包栏”。这就是我到目前为止所做的,汉堡包栏显示,但当我点击它时,什么也没有发生,我的代码:

<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    {% load static %}
    <link rel="shortcut icon" type="image/JPG" href="{% static 'images/favicon.ico' %}"/>
    <link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>


<body>

<div class="navbar-fixed">
  <nav>
      <div class="nav-wrapper  teal lighten-1">
        <a href="#!" class="brand-logo"><i class="material-icons">assignment </i>Logo</a>
        <a href="#" data-target="mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a href="/">Home</a></li>
          <li><a href="/newsroom">Newsroom</a></li>
        </ul>
      </div>
    </nav>
  </div>

  <ul class="sidenav" id="mobile">
    <li><a href="/">Home</a></li>
    <li><a href="/newsroom">Newsroom</a></li>
  </ul>

<script language="javascript">
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });
</script>

  <div>
    {% block content %}
    {% endblock %}
  </div>

</body>

<script src="{% static "tinymce/js/prism.js" %}"></script>

我认为问题在于javascript部分,但我无法解决它

从现在开始谢谢你


Tags: httpsdivcomjslinkscriptstaticli
1条回答
网友
1楼 · 发布于 2024-05-20 16:24:57

取出未定义的options变量:

<script language="javascript">
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });
</script>

这是文档的问题,不是你的问题

相关问题 更多 >