文章/答案/技术大牛

发布

社区首页 >问答首页 >Dropdown Materialize不工作(没有下拉列表)

问Dropdown Materialize不工作(没有下拉列表)
EN

Stack Overflow用户

提问于 2018-05-26 03:13:27

回答 1查看 1.8K关注 0票数 0

因此，我使用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>
                ...
            ...
        ...

我还使用了materialize网站上提供的jQuery代码，但没有成功。是我的CDN引用的问题，类名是否改变了，还是我的HTML有问题？

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

materialize

javascript

html

css

frontend

回答 1

Stack Overflow用户

发布于 2018-05-29 14:20:49

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50535537

复制

相似问题

问Dropdown Materialize不工作(没有下拉列表)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Dropdown Materialize不工作(没有下拉列表)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Dropdown Materialize不工作(没有下拉列表)
EN