Выпадающее меню материализации не работает при рендеринге руля - PullRequest
0 голосов
/ 30 ноября 2018

Другие посты по этой проблеме не помогли мне до сих пор, поэтому я решил поделиться своим заданием.

Ниже приведена моя main.handlebars установка, включая мои библиотеки jQuery и Materialize, а такжев качестве явного раздела для инициализации метода dropdown().

<body>
  {{{body}}}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

  <script>
    $(document).ready(function (e) {
      alert("jquery load");
      debugger;
      $('.dropdown-trigger').dropdown();
    });
  </script>

</body>

И рендеринга в этом {{body}}, вот часть моей навигации, которая имеет желаемый раскрывающийся список:

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

    <!-- Dropdown Structure -->
    <ul id='dropdown1' class='dropdown-content' role="menu">
      <li><a href="#city">City</a></li>
      <li><a href="#host">Host</a></li>
      <li><a href="#interest">Interest</a></li>
      <li><a href="#dates"><i class="material-icons">view_module</i>Dates</a></li>
      <li class="divider" tabindex="-1"></li>
      <li><a href="#all"><i class="material-icons">cloud</i>All</a></li>
    </ul>

Судя по тому, что я прочитал, все должно быть хорошо,,и я знаю, что инициализация <script> выполняется путем тестирования с alert(), но не предпринимает никаких действий.Тупик!

1 Ответ

0 голосов
/ 30 ноября 2018

Похоже, вы используете Materialise версии 0.100.2, но вы читаете документацию для Materialise версии 1.0.0.

Если вы хотите использовать версию 0.1, вам нужно будет использовать атрибут data-activates вместо data-target и имя класса dropdown-button вместо dropdown-trigger в вашей разметке.

Более подробную информацию о критических изменениях между двумя версиями можно найти здесь: https://github.com/Dogfalo/materialize/blob/v1-dev/v1-upgrade-guide.md

Приветствия!

...