文档:http://materializecss.link/dropdown.html
<!-- Dropdown Trigger -->
<a class="dropdown-button btn" href="#!" data-activates="dropdown1">Drop Me!</a>
<!-- Dropdown Structure -->
<ul style="width: 138px; display: none; top: 283.317px; left: 454px; height: 159px; opacity: 0;" 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>
显然，这就是您需要的全部内容。我到底错过了什么？
更新:
这都在我的页面底部:
<script src="js/jquery.min.js"></script>
<script src="js/materialize.min.js"></script>
<!-- Materialize -->
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.parsecdn.com/js/parse-1.2.19.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/handlebars-v1.3.0.js"></script>
<script src="js/bootstrap3-wysihtml5.js"></script>
<script src="js/blog.js"></script>
<!-- Popup -->
<script src="view.min.js?auto"></script>
...这是在我顶部的标题中:
<script>
$( document ).ready(function() {
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: false, // Activate on click
alignment: 'left', // Aligns dropdown to left or right edge (works with constrain_width)
gutter: 0, // Spacing from edge
belowOrigin: false // Displays dropdown below the button
}
);
});
</script>
最佳答案
也许这可以帮助你？ 包括 jQuery、materialize.js、materialize.css 并在文档准备好时执行 jQuery 插件初始化:
参见 https://learn.jquery.com/using-jquery-core/document-ready/
我认为 JavaScript 文件的顺序也很重要。 首先加载 jQuery，然后加载 materialize.js
$( document ).ready(function() {
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: false, // Activate on click
alignment: 'left', // Aligns dropdown to left or right edge (works with constrain_width)
gutter: 0, // Spacing from edge
belowOrigin: false // Displays dropdown below the button
}
);
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>
</head>
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- 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>
</html>关于javascript - 无法使用 Materialize CSS 框架生成下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35126848/