Question

所以我正在使用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>
                ...
            ...
        ...

我还使用了materialise网站上提供的jQuery代码，但没有运气。这是我的CDN引用问题，类名是否改变或者是我的HTML问题？

我不知道，但感谢任何帮助，谢谢！

Answer 1

$(".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>

下拉物化不起作用（没有任何下降）

1 个答案: