我正尝试从2019年3月起开始使用Material Design Web 1.0。
但是一开始我有一个问题：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; script-src 'unsafe-inline' https://unpkg.com; style-src 'unsafe-inline' https://unpkg.com https://fonts.googleapis.com"/>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet"/>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<script type="module">
const menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
menu.open = false;
</script>
</head>
<body>
<header class="mdc-top-app-bar mdc-top-app-bar--fixed mdc-menu-surface--anchor">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon" onclick="menu.open = !menu.open;">menu</a>
<span class="mdc-top-app-bar__title">Test</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
</section>
</div>
我的问题是，对于onclick="menu.open = !menu.open;"浏览器控制台来说，它是未定义的。那是因为<script type="module">。但是，删除type="module"时，script标记的内容将引发错误，提示未定义内容。
所以我的问题是：
什么是在onclick处理程序中打开/关闭菜单的正确方法（在unpkg.com中使用快速入门时-请参阅“入门”）？
相关分类