Выпадающий список не отображается с помощью Materialize - PullRequest
0 голосов
/ 03 апреля 2020

У меня есть materialize.min. css уже включено, и все остальное на странице работает. Но когда я пытаюсь раскрыться, ничего не происходит. Любая помощь будет оценена. Я пытаюсь показать выпадающий список dropdown1. Первый li в nav-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 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>

1 Ответ

0 голосов
/ 03 апреля 2020

Вы должны включить файл. js также перед окончанием тега body. Скопируйте следующий тег и поместите его перед конечным тегом тела.

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...