Выпадающий материал не работает (ничего не падает) - PullRequest
Новая
       22

Выпадающий материал не работает (ничего не падает)

0 голосов
/ 25 мая 2018

Так что я использую Materialize, чтобы у меня была выпадающая кнопка в моей навигационной панели.Проблема в том, что ничего не происходит, когда я нажимаю кнопку.Вот как выглядит мой код: 

<head>
<meta charset="UTF-8">

    <!-- jQuery and Bootstrap CDN for JS animations-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- Import materialize.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <link type="text/css" rel="stylesheet" href="{% static 'css/materialize.css' %}"  media="screen,projection"/>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>

    <ul id="dropdown1" class="dropdown-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>
    <div class="container-fluid">
        <div class="nav-wrapper">
            <!-- Collapsible button -->
            <ul class="show-on-small right" data-target="#topNavBar" id="menu"> <!-- nav-wrapper -->
                <a class="dropdown-trigger btn" href="#!" data-target="dropdown1" style="color: white;">
                    <i class="fa fa-tasks" aria-hidden="true"></i> Menu
                </a>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        var elems = document.querySelectorAll('.dropdown-trigger');
                        var instances = M.Dropdown.init(elems, options);
                    });
                </script>
                ...
            ...
        ...

Я также использовал код jQuery, представленный на веб-сайте материализации, но безуспешно.Это из-за моих ссылок на CDN, изменились ли имена классов или из-за моего HTML?

Не знаю, но любая помощь приветствуется, спасибо!

1 Ответ

0 голосов
/ 29 мая 2018 

$(".dropdown-trigger").dropdown();
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-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>
  <div class="nav-wrapper">
  
  <ul class="left ">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right"></i></a></li>
    </ul>
  </div>
</nav>
...