无按钮材质菜单答案

【问题标题】：Material menu without button无按钮材质菜单
【发布时间】：2017-07-01 13:54:02
【问题描述】：

我将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>

【问题讨论】：

您是否有 JavaScript 代码可以在点击时显示菜单及其项目？
可能在这里code.getmdl.io/1.2.1/material.js。但我不知道在那里做什么。
在浏览器中加载页面时看不到菜单吗？
是的，它被隐藏了。

标签： jquery material-design

【解决方案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>

【讨论】：

您好，感谢您的帮助！所以问题是 ul 的位置？代码看起来一样。
是的，您的代码没有问题。这只是ul的定位。将 <ul class="mdl-menu mdl-menu--top-left 更改为 <ul class="mdl-menu mdl-menu--lower-left 可以解决此问题。
但仅当按钮位于顶部时，右侧:) 我的位于页面底部。
是的，它被向下推 250px 并与 ul 一起工作，即 <ul class="mdl-menu mdl-menu--top-left。 jsfiddle.net/uybsr4dm/2