时间戳

首页 > 解决方案 > 物化导航栏下拉菜单不起作用

javascript - 物化导航栏下拉菜单不起作用

问题描述

由于某种原因，我的导航栏中的下拉菜单不起作用。下拉按钮在那里，但它没有下降，所以下拉的触发部分可能有问题。我已经尝试了一切，但我无法修复它，感谢任何帮助。这是物化文档的链接：https ://materializecss.com/navbar.html

{% load static %}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Casual Clothing comparer</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>

<body>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>

<div class="row">
    {% for post in final_products %}
        <div class="col s12 m6 l4">
            <div class="card horizontal hoverable z-depth-1-half">
                <div class="card-image" id="card_image" style="height:300px">
                    <img src="{{ post.6 }}">
                </div>
                <div class="card-stacked">
                    <div class="card-content">
                        <span class="card-title">{{ post.0 }}</span>
                        <p>Initial Price €{{ post.3 }}</p>
                        <p>Discount {{ post.7 }}%</p>
                        <p style="margin-top: 10px; font-size: x-large">Price €{{ post.2 }}</p>
                    </div>
                    <div class="card-action">
                        <a href="{{ post.5 }}" style="color: green; font: bold">Buy</a>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
    <div class="container text-center">
      <small>Copyright &copy; Your Website</small>
    </div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
    $(document).ready(function(){
        //Initialize dropdown
        $(".dropdown-trigger").dropdown();
    });
</script>
</body>
</html>

标签： javascripthtml

解决方案

这$(document)是一个 jQuery 选择器，您没有包含 jQuery 的路径。我在您的代码中添加了以下行，并且下拉菜单工作正常：<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>. 您可以在此处阅读有关此内容的更多信息。

该代码行应包含在以下内容之前：

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

您的代码不起作用的原因是 Materialize CSS 使用 jQuery 方法。

推荐阅读