需要帮助才能使此下拉菜单正常工作

Question

我按照https://materializecss.com/dropdown.html的说明进行操作，仍然无法让此下拉菜单正常工作。$(document).ready(function() {  $('.dropdown-trigger').dropdown();});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/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><!-- Compiled and minified CSS --><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"><a href="#" class="waves-effect dropdown-trigger" id="dropdown" data-target="dropdown"><i class="material-icons">notifications</i></a><!-- Dropdown Structure --><ul id="dropdown" 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></li>

Answer 1

请您检查一下好吗？我发现您的代码中某些项目的放置位置错误li。而且你也没有包括jquery. 否则这里一切正常。

$(document).ready(function() {

  $('.dropdown-trigger').dropdown();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

<!-- Compiled and minified CSS -->

<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">

<a class='dropdown-trigger waves-effect' href='#' data-target='dropdown1'><i class="material-icons">notifications</i></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>