物化下拉菜单不起作用
[英]Materialize dropdown doesn't work
问题描述
我正在尝试使用 Materialise 在侧边栏中创建一个下拉菜单，但它不起作用。 下拉菜单的宽度与触发器的宽度不同，填充将锚点移动到列表项的底部。 （代码与docs网站相同）
这是一个有问题的 Codepen：示例
谢谢您的帮助 ：）
$(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>
7 个解决方案
解决方案1
4 2016-03-24 01:54:50
对于任何有类似问题的人：我遇到了类似的问题，因为我使用的是 jQuery 3.x beta。 切换到 2.2.2，现在很好。 似乎动画机制发生了一些变化。
希望这可以帮助某人。
解决方案2
3 已采纳 2015-05-19 08:29:35
您可以设置constraint_width = true或简单地初始化下拉列表而不传递任何json 对象。
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: true,
hover: false,
gutter: 0,
belowOrigin: false
}
);
或者您可以使用其默认值初始化下拉列表（顺便说一下，上面提供的 json 对象是默认下拉值）。
$('.dropdown-button').dropdown();
解决方案3
1 2018-01-04 20:50:32
如果您在项目中使用 bootstrap，请在您的站点上的 bootstrap.js之后绑定 materialize.js。 这对我有用
解决方案4
1 2018-10-07 08:26:17
遇到同样的情况后，我找到了使用另一种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>
解决方案5
0 2016-12-10 09:13:05
在我的项目中，这个错误是因为 bootstrap.js 发生的。 只需删除对它的引用，它就会正常工作..
解决方案6
0 2018-12-11 17:50:17
<!-- Kindly be well advised there is nothing wrong with the code provided with regard to the subject.
但是，存在轻微的 HTML 标记（“span 标记”）使用违规和缺少标记。 此外，CDN 源标签链接必须按时间顺序排列，见下文。 我认为这是您的复制/粘贴。 :) 尽管如此，请始终保持您的代码整洁、干净、格式良好并遵守 HTML“使用正确的文档类型”编码约定。 始终将文档类型声明为文档中的第一行：-->
<!DOCTYPE html>
<html lang="en-US">
<!--
声明语言对于辅助功能应用程序（屏幕阅读器）和搜索引擎很重要。 但是，我们不建议省略 html 标签和 body 标签。 省略 html 标签或 body 标签可能会导致 DOM 和 XML 软件崩溃。 省略 body 标签也会在旧浏览器 (IE9) 中产生错误。
在 HTML5 中，head 标签可以省略。 默认情况下，浏览器会将 body 标签之前的所有元素添加到默认的 head 标签元素中。 您可以通过省略 head 标签来降低 HTML 的复杂性：
一组导航链接位于正文标签之前：-->
<!--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">HC@gmail.com</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> -->
解决方案7
0 2021-02-27 08:20:12
使用此代码它将起作用
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.collapsible').collapsible();
});
物化下拉列表和sidenav不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.