物化下拉列表不起作用

Question

我正在尝试使用Materialize在侧边栏中创建一个下拉菜单,但它不起作用.下拉列表的宽度与触发器的宽度不同,并且填充将锚点移动到列表项的底部.(代码与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>

Answer 1

您可以设置constraint_width = true或简单地初始化下拉列表，而不传递任何 json 对象。

$('.dropdown-button').dropdown({
           inDuration: 300,
           outDuration: 225,
           constrain_width: true, 
           hover: false, 
           gutter: 0, 
           belowOrigin: false 
           }
      );

或者您可以使用默认值初始化下拉列表（顺便说一句，上面提供的 json 对象是默认下拉列表值）。

$('.dropdown-button').dropdown();