【问题标题】：How to fix: Materialize navbar dropdown not working如何修复：物化导航栏下拉菜单不起作用
【发布时间】：2019-09-27 17:04:53
【问题描述】：

我正在使用 Laravel 6 并使用 Materialize CSS 和 jQuery。我制作的导航栏下拉菜单之一（如代码所示）给了我以下错误（如图所示）

我尝试过在 jQuery 中获取类名和 id 名，但两者都不起作用。`

导航栏下拉菜单：

<a class="dropdown-trigger"
id="dropdown-init"
data-target="dropdown"
href="{{ route('login') }}"> {{ __('Login') }} </a>

下拉内容：

<ul class="dropdown-content" id="dropdown">
  <li>
    <form action="{{ route('logout') }}" method="POST">
      @csrf
        <button class="btn green darken-4 white-text" type="submit">
          {{ __('Logout') }}
        </button>
    </form>
  </li>
</ul>

jQuery 初始化器：

$(document).ready(function(){
  $('.dropdown-trigger').dropdown();
});

错误：

【问题讨论】：

标签： jquery materialize

【解决方案1】：

  <!-- Dropdown Trigger -->
  <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider" tabindex="-1"></li>
    <li><a href="#!">three</a></li>
    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
  </ul>

查看 Materialize 文档，您遇到的错误是因为您更改了物化 ID 和类。您无法更改它们，因为那里有特定功能的变量。

替换它们很明显会引发错误，因为您将其替换为角度代码。我建议你玩一下你可以使用的功能并随时测试它，当它坏了你就会知道你使用的代码是必不可少的。

祝你好运！

【讨论】：