javascript – Materialise下拉列表不起作用

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

javascript – Materialise下拉列表不起作用

解决方法

猜你在找的JavaScript相关文章