Fatal编程技术网
  • javascript/
  • Javascript 使用脚本模块和onclick处理程序的材质设计Web 1.0快速启动问题

Javascript 使用脚本模块和onclick处理程序的材质设计Web 1.0快速启动问题

javascript html css

Javascript 使用脚本模块和onclick处理程序的材质设计Web 1.0快速启动问题,javascript,html,css,material-design,Javascript,Html,Css,Material Design,我正在尝试从2019年3月开始使用1.0进行快速启动 但一开始我有个问题： 试验 const menu=mdc.menu.MDCMenu.attachTo（document.querySelector（'.mdc menu'））； menu.open=false； 试验 主页 压印 数据隐私声明 这是变量的作用域问题。在type='module'中，变量不会像普通script那样自动全局声明。您必须手动将它们附加到窗口对象。 下面两个选项都可以解决您的问题 希望能帮助你 <

我正在尝试从2019年3月开始使用1.0进行快速启动

但一开始我有个问题：


试验
const menu=mdc.menu.MDCMenu.attachTo（document.querySelector（'.mdc menu'））；
menu.open=false；
试验


这是
变量的作用域问题。在
type='module'
中，变量不会像普通
script
那样自动全局声明。您必须手动将它们附加到
窗口
对象。
下面两个选项都可以解决您的问题



希望能帮助你


    <script type="module">
          window.menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
          window.menu.open = false; 
          window.toggleMenu = function () { window.menu.open = !window.menu.open }
    </script>

    <a href="#" class="material-icons mdc-top-app-bar__navigation-icon" id="button" onclick="toggleMenu();">menu</a>



<script type="module">    
  const menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu')); 
        menu.open = false;
  document.getElementById('toggleButton').addEventListener('click', () => menu.open = !menu.open);
</script>