Question

我正在使用getmdl.io库来完成一些事情。现在我想在不使用button但不使用div的情况下触发菜单，但我的代码不起作用。帮助会很棒！

<div id="menu1"><i class="material-icons mi-mmenu">menu</i> Match Menu</div>

<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
    data-mdl-for="menu1">
  <li class="mdl-menu__item">Some Action</li>
  <li class="mdl-menu__item">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>

Answer 1

试试这个https://jsfiddle.net/uybsr4dm/1/。您需要将菜单中项目的位置更改为mdl-menu--lower-left。因为当您单击菜单时，项目会显示，但它们会被截止。

<div id="menu1"><i class="material-icons mi-mmenu">menu</i> Match Menu</div>

<ul class="mdl-menu mdl-menu--lower-left mdl-js-menu mdl-js-ripple-effect"
    data-mdl-for="menu1">
  <li class="mdl-menu__item">Some Action</li>
  <li class="mdl-menu__item">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>

没有按钮的材质菜单

1 个答案: