實現導航欄下拉菜單不起作用

Question

出於某種原因，我的導航欄中的下拉菜單不起作用。 下拉按鈕在那里，但它沒有下降，所以下拉的觸發部分可能有問題。 我已經嘗試了一切，但我無法修復它，任何幫助表示贊賞。 這是 Materialize 文檔的鏈接： 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>

Answer 1

$(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 方法。

實現導航欄下拉菜單不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2020-08-27 10:41:39

實現導航欄下拉菜單不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2020-08-27 10:41:39

解決方案1
1 已采納 2020-08-27 10:41:39