Javascript 物化下拉菜单不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30226097/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Materialize dropdown doesn't work
提问by filippo90
I'm trying to make a dropdown menu inside a sidebar with Materialize, but it doesn't work. the width of the dropdown isn't the same as the trigger and the padding move the anchor to the bottom of the list item. (The code is the same as the docs website)
我正在尝试使用 Materialise 在侧边栏中创建一个下拉菜单，但它不起作用。下拉菜单的宽度与触发器的宽度不同，填充将锚点移动到列表项的底部。（代码与docs网站相同）
Here is a Codepen with the issue: example
这是一个有问题的 Codepen：示例
Thanks for the help :)
谢谢您的帮助 ：）
$(document).ready(function(){
// Sidebar
$(".button-collapse").sideNav({menuWidth: 320, activationWidth: 70, edge: 'left'});
// Dropdown
$('.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 hover
gutter: 0, // Spacing from edge
belowOrigin: false // Displays dropdown below the button
}
);
});<div id="slide-out" class="side-nav full">
<ul>
<li><a href="#">First Link</span></a></li>
<li><a href="#">Second Link</span></a></li>
<!-- Dropdown Trigger -->
<li><a class='dropdown-button' href='#' data-activates='dropdown1'>Drop Me!</a></li>
</ul>
</div>
<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>
<div class="row">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu medium black-text left"></i></a>
</div>采纳答案by nexuscreator
You can set the constraint_width = trueor simply initialize dropdown without passing any json object.
您可以在constraint_width = true不传递任何 json 对象的情况下设置或简单地初始化下拉列表。
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: true,
hover: false,
gutter: 0,
belowOrigin: false
}
);
Or you may initialize the dropdown with its defaults(by the way, json object provided above is the default dropdown value).
或者您可以使用其默认值初始化下拉列表（顺便说一下，上面提供的 json 对象是默认下拉值）。
$('.dropdown-button').dropdown();
回答by Andrew Dunai
For anyone having similar issue: I've got a similar problem because I was using jQuery 3.x beta. Switched to 2.2.2 and now it's fine. Seems like some changes in animations mechanisms.
对于任何有类似问题的人：我遇到了类似的问题，因为我使用的是 jQuery 3.x beta。切换到 2.2.2 现在好了。似乎动画机制发生了一些变化。
Hope this helps somebody.
希望这可以帮助某人。
回答by Serg
If you use bootstrap in your Project, bind materialize.js afterbootstrap.js on your site. This works for me
如果您在项目中使用 bootstrap，请在您的站点上的 bootstrap.js之后绑定 materialize.js 。这对我有用
回答by Marlon da Veiga
After facing the same situation, I found a solution using another Jquery method:
遇到同样的情况后，我找到了使用另一种Jquery方法的解决方案：
$(".dropdown-trigger").dropdown();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<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 ">
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown</a></li>
</ul>
</div>
</nav>回答by I'am
<!-- Kindly be well advised there is nothing wrong with the code provided with regard to the subject.
However, there are minor HTML tag("span tags") usage violation(s) and missing tags. Moreover, the CDN source tags links must be arrange in a chronological order, see below. I assume this was a copy/paste from your part. :) Nevertheless, always keep your code tidy, clean, well-formed and respect the HTML "Use Correct Document Type" Coding Conventions. Always declare the document type as the first line in your document: -->
但是，存在轻微的 HTML 标记（“span 标记”）使用违规和缺少标记。此外，CDN 源标签链接必须按时间顺序排列，见下文。我认为这是您的复制/粘贴。:) 尽管如此，请始终保持您的代码整洁、干净、格式良好并遵守 HTML“使用正确的文档类型”编码约定。始终将文档类型声明为文档中的第一行：-->
<!DOCTYPE html>
<html lang="en-US">
<!--
Declaring a language is important for accessibility applications (screen readers) and search engines. However, we do not recommend omitting the html tags and the body tags. Omitting html tags or body tags can crash DOM and XML software. Omitting body tags can also produce errors in older browsers (IE9).
声明语言对于辅助功能应用程序（屏幕阅读器）和搜索引擎很重要。但是，我们不建议省略 html 标签和 body 标签。省略 html 标签或 body 标签可能会导致 DOM 和 XML 软件崩溃。省略 body 标签也会在旧浏览器 (IE9) 中产生错误。
In HTML5, the head tags can be omitted. By default, browsers will add all elements before body tags to a default head tags element. You can reduce the complexity of HTML by omitting the head tags:
在 HTML5 中，head 标签可以省略。默认情况下，浏览器会将 body 标签之前的所有元素添加到默认的 head 标签元素中。您可以通过省略 head 标签来降低 HTML 的复杂性：
set of navigational links is before the body tags: -->
一组导航链接位于正文标签之前：-->
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://google.github.io/material-design-icons/">
<!--Import Boostrap Icon Font-->
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/1.1.34/css/materialdesignicons.min.css">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<title>Materialize Dropdown List </title>
<body>
<!-- Page Content goes here, <div> tags, <ul> tags, <li> tags and <main> tags which specify the main content of a document-->
<!-- Slide-Out Structure -->
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<i class="mdi mdi-office small"></i>
</div>
<a href="#user"><img class="circle" src="https://www.directlink.coop/img/icons/avatars/145841-avatar-set/png/boy-1.png"></a>
<a href="#name"><span class="black-text name">HappyCoder</span></a>
<a href="#email"><span class="black-text email">[email protected]</span></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">cloud</i>MyCloud data vault</a></li>
<!-- Dropdown Trigger -->
<li><a href='#' data-target='dropdown1' class='dropdown-trigger'>Drop Me!</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Admin</a></li>
<li><a class="waves-effect" href="#!">Bitcoin Expenses</a></li>
</ul>
<!-- 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="#!">If this has helped you in any way, you know what to do.</a></li>
</ul>
<!-- Slide-Out Trigger -->
<div class="row">
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="mdi mdi-menu medium black-text left"></i></a>
</div>
<!--Main layout-->
<main>
</main>
<!-- Optional JavaScript -->
<!-- Arrange the jQuery first, then Bootstrap JS, and then the materialize JS chronologically using latest versions -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<!-- The traditional method of initializing JQuery, compatible with most browser -->
<script>
$(document).ready(function(){
//Sidebar
$('.sidenav').sidenav({menuWidth: 320, inDuration: 700, outDuration: 225, activationWidth: 70, edge: 'right'});
// Dropdown
$('.dropdown-trigger').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: false, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false // Displays dropdown below the button
});
});
</script>
</body>
</hmtl>
<!-- Close All HTML Elements
**BAD**: </span>
**Good**: <span>/span> -->
回答by S.Mohamed Mahdi Ahmadian zadeh
In My project , this error happened because of bootstrap.js . just remove the reference to it and it will work fine..
在我的项目中，这个错误是因为 bootstrap.js 发生的。只需删除对它的引用，它就会正常工作..
