我正在尝试使用Materialize在侧边栏中创建一个下拉菜单,但它不起作用.
下拉列表的宽度与触发器的宽度不同,并且填充将锚点移动到列表项的底部. (代码与docs网站相同)
下拉列表的宽度与触发器的宽度不同,并且填充将锚点移动到列表项的底部. (代码与docs网站相同)
这是Codepen的问题：example
谢谢您的帮助 ：)
$(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>
解决方法
您可以设置constraint_width = true或简单地初始化下拉列表而不传递任何json对象.
$('.dropdown-button').dropdown({
inDuration: 300,constrain_width: true,hover: false,gutter: 0,belowOrigin: false
}
);
或者您可以使用其默认值初始化下拉列表(顺便提一下,上面提供的json对象是默认下拉值).
$('.dropdown-button').dropdown();