时间戳

首页 > 解决方案 > 使用 Materialize 未显示下拉菜单

html - 使用 Materialize 未显示下拉菜单

问题描述

我已经包含了 materialize.min.css 并且页面上的所有其他内容都在工作。但是当我尝试下拉菜单时，似乎什么也没发生。任何帮助，将不胜感激。我要显示的下拉列表是 dropdown1。导航内容中的第一个 li。如您所见，我尝试将下拉列表放在原点下方，但没有帮助。

    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>


 <nav class="nav-extended">
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">ASite</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li>
            <form>
        <div class="input-field">
          <input id="search" type="search" required>
          <label for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>

        </li>

        <li><a class="waves-effect waves-light btn">Register</a></li>
        <li><a class="waves-effect waves-light btn">Login</a></li>
      </ul>
    </div>
    <div class="nav-content">
      <ul class="tabs tabs-transparent">
        <li class="tab"><a class='dropdown-button' href='#' data-activates='dropdown1' data-beloworigin='true'>Drop Me!</a></li>
        <li class="tab"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab"><a href="#test3">Disabled Tab</a></li>
        <li class="tab"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
  </nav>

  <ul class="sidenav" id="mobile-demo">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">JavaScript</a></li>
  </ul>

  <div id="test1" class="col s12">Test 1</div>
  <div id="test2" class="col s12">Test 2</div>
  <div id="test3" class="col s12">Test 3</div>
  <div id="test4" class="col s12">Test 4</div>

标签： htmlcssmaterialize

解决方案

您还必须在正文的结束标记之前包含 .js 文件。复制以下标签并将其放在正文的结束标签之前。

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

推荐阅读