如何使用javascript触发一个mdl菜单

How to trigger a mdl-menu using javascript?

本文关键字：一个 mdl 菜单 何使用 javascript      更新时间：2023-09-26

有人可以帮助我如何执行一个mdl菜单(材料设计生活)使用javascript?我没有在他的网站上找到如何做这件事的解释。

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>

屏幕截图:此处输入图像描述

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

根据源代码:"在现有的DOM中搜索我们组件类型的元素，如果它们还没有升级，就升级它们。"

一个简单的方法是触发一个'click'事件(在这个页面的javascript控制台尝试下面的代码):

// 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);

或者，我们也可以使用浏览器的inspector开发工具来查找按钮的事件处理程序，并从中学习。

相关文章：