Question

有人可以帮我解决如何使用javascript执行mdl菜单（Material Design lite）吗？我没有在他的网站上找到解释如何做到这一点。

Html代码

<!-- Left aligned menu below button -->
<button id="demo-menu-lower-left"
        class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
    for="demo-menu-lower-left">
  <li class="mdl-menu__item">Some Action</li>
  <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>

屏幕截图： enter image description here

Answer 1

您可以使用以下命令重新初始化菜单： componentHandler.upgradeDom('MaterialMenu', 'mdl-menu');

根据source code这个：＆＃34;在现有DOM中搜索我们组件类型的元素，如果它们尚未升级则升级它们。＆＃34;

Answer 2

一种简单的方法是触发“点击”。上它的事件（在this page的javascript控制台中尝试以下代码）：

2.13.0-pre-abcd123

或者，我们也可以使用浏览器的// the button of 3 vertical dots var button = document.querySelector('#demo-menu-lower-left'); // create a "click" event and dispatch it to button var ev = new Event('click'); button.dispatchEvent(ev);开发工具来查找按钮的事件处理程序，并从中学习。

如何使用javascript触发mdl菜单？

2 个答案: