所以我使用 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 问题？
我不知道，但感谢任何帮助，谢谢!
最佳答案
$(".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>关于javascript - 下拉 Materialise 不工作(没有下拉)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50535537/