从按钮打开 MDCMenu答案

【问题标题】：Opening MDCMenu from Button从按钮打开 MDCMenu
【发布时间】：2019-10-25 09:47:20
【问题描述】：

我想用 MDCTopAppBar 中的按钮打开一个 MDCMenu。该文档缺少如何执行此操作的示例代码。所以我试图通过 EventListener 来做到这一点。如果有更顺畅的方法，请告诉我。

EvenListener 抱怨 MDCMenu 没有定义。

import {MDCMenu} from '@material/menu';
import {MDCTopAppBar} from '@material/top-app-bar';
import {MDCMenuSurface} from '@material/menu-surface';

const topAppBarElement = document.querySelector('.mdc-top-app-bar');
const topAppBar = new MDCTopAppBar(topAppBarElement);

console.log('hello world');

const menu = new MDCMenu(document.querySelector('.mdc-menu'));

document.querySelector('#menu-button').addEventListener("click", () => {
   menu.open != menu.open;
});

menu 在这里被定义为全局常量。控制台或者这个EventListener怎么会不知道呢？

单击按钮会在控制台中触发以下内容：

ReferenceError: MDCMenu is not defined localhost:8080:1:14
    onclick http://localhost:8080/:1

导入似乎有问题。但是 EvenListener 只是引用实例，而不是类。我不明白为什么它甚至需要 MDCMenu...

【问题讨论】：

标签： mdc-components material-components-web

【解决方案1】：

在 vanilla JS 中，您必须使用完全限定名称。

const menu = new mdc.menu.MDCMenu(document.querySelector('.mdc-menu'));

See Fiddle

ps：我认为事件监听器应该做menu.open = !menu.open;

【讨论】：

导入使 MDCMenu 可用，但没有完整的限定名称。
感谢 hin 与 menu.open = !menu.open。 :) 当然，这种改变也是必要的。

【解决方案2】：

我忘记导入 MDCMenuSurface。完整的运行代码是：

import {MDCMenu} from '@material/menu';
import {MDCTopAppBar} from '@material/top-app-bar';
import {MDCMenuSurface} from '@material/menu-surface';

// Instantiation
const topAppBarElement = document.querySelector('.mdc-top-app-bar');
const topAppBar = new MDCTopAppBar(topAppBarElement);

const menu = new MDCMenu(document.querySelector('.mdc-menu'));

function openMenu() {
   menu.open = !menu.open;

}

document.querySelector('#menu-button').addEventListener("click", openMenu);

【讨论】：