如何使用 javascript 触发 mdl 菜单？答案

【问题标题】：How to trigger a mdl-menu using javascript?如何使用 javascript 触发 mdl 菜单？
【发布时间】：2017-03-30 02:11:32
【问题描述】：

有人可以帮助我如何使用 javascript 执行 mdl-menu（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

【问题讨论】：

网站说明如何在此处实现此功能：getmdl.io/components/#menus-section
@hackerrdave yap.. 但没有 javascript 解释
只要您通过<script src="https://code.getmdl.io/1.2.1/material.min.js"></script>（或其他方式）加载 mdl js 库，只要您使用正确的类，您就会获得菜单功能。
@hackerrdave 麻烦了，我使用 ajax 制作了我的网站，所以 mdl 库只加载了一次。当我浏览页面时，我需要再次注册所有材料设计组件的事件处理程序，但没有解释如何做到这一点
啊，我明白了——看看这个帖子：github.com/google/material-design-lite/issues/871 他们推荐componentHandler.upgradeDom('MaterialMenu', 'mdl-menu');

标签： javascript jquery material-design

【解决方案1】：

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

根据source code：“在现有 DOM 中搜索我们组件类型的元素，如果它们尚未升级，则升级它们。”

【讨论】：

【解决方案2】：

一种简单的方法是在其上触发“点击”事件（在this page 的 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开发者工具找到按钮的事件处理函数，并从中学习。

【讨论】：

yah.. 但我的情况是，我需要重新注册 MaterialMenu，因为我使用 html5 历史 API 创建了一个网页，所以页眉和页脚是静态的。当ajax加载主容器时，需要重新注册事件处理程序..