如何解决物化导航栏问题？答案

【问题标题】：How do I solve materialise nav-bar issues?如何解决物化导航栏问题？
【发布时间】：2021-08-03 15:46:06
【问题描述】：

我正在尝试使用 materialise 在我的导航栏中添加一个下拉菜单，但它不起作用。我正在添加代码 sn-p。除此之外，我在head中导入了materialize CSS和icon，在body中导入了JS和JQuery。

有人可以帮我解决我哪里出错了吗？这是文档https://materializecss.com/navbar.html#!

<ul id="dropdown1" class="dropdown-content">
        <li><a href="./music/index.html">Bollywood Music</a></li>
        <li><a href="./OTT/index.html">OTT TV Series</a></li>
        <li><a href="index.html">Academic Literature</a></li>
        <li><a href="./yaFiction/index.html">YA Fiction</a></li>
    </ul>
         
    <nav class="nav-wraper #362b32">
        <div class="container">
            <ul class= "right hide-on-med-and-down">
                <li><a href="../index.html">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Articles<i class="material-icons right">arrow_drop_down</i></a></li>
            </ul>
        </div>
    </nav>

<!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!--JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
        $(document).ready(function(){
         $(".dropdown-trigger").dropdown();
    })

</script>

【问题讨论】：

标签： javascript html jquery materialize

【解决方案1】：

检查类名是否正确。 nav-wraper 中的类 <nav> should be nav-wrapper，而不是 nav-wraper。

至于下拉列表，代码正在初始化类dropdown-trigger 的下拉列表，但HTML 使用dropdown-button。将class="dropdown-button" 更改为class="dropdown-trigger"。

documentation 还声明指定下拉目标 ID 的正确属性是 data-target，但 HTML 使用 data-activates，所以更改它。

最后，应该在Materialize之前加载JQuery，以便Materialize可以向JQuery注册.dropdown()函数。

试试这个：

<!DOCTYPE html>
<html>

<head>
  <title>Example</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head>

<body>

  <ul id="dropdown1" class="dropdown-content">
    <li><a href="./music/index.html">Bollywood Music</a></li>
    <li><a href="./OTT/index.html">OTT TV Series</a></li>
    <li><a href="index.html">Academic Literature</a></li>
    <li><a href="./yaFiction/index.html">YA Fiction</a></li>
  </ul>

  <nav class="nav-wrapper">
    <div class="container">
      <ul class="right">
        <li><a href="../index.html">Home</a></li>
        <li>
          <a class="dropdown-trigger" href="#" data-target="dropdown1">
          Articles<i class="material-icons right">arrow_drop_down</i>
        </a>
        </li>
      </ul>
    </div>
  </nav>

  <!--JQuery-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    $(document).ready(function() {
      $(".dropdown-trigger").dropdown();
    });
  </script>

</body>

</html>

【讨论】：