Проблема быстрого запуска Material Design Web 1.0 с модулем сценария и обработчиком onclick - PullRequest
Новая
       15

Проблема быстрого запуска Material Design Web 1.0 с модулем сценария и обработчиком onclick

1 голос
/ 03 мая 2019

Я пытаюсь получить краткий старт с Material Design Web 1.0 от марта 2019 года.

Но у меня есть проблема в начале: 

    <!DOCTYPE html>
    <html lang="en">
      <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>
          <div class="mdc-menu mdc-menu-surface" tabindex="-1">
            <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
              <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Homepage</span></li>
              <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Imprint</span></li>
              <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Data privacy statement</span></li>
            </ul>
          </div>
        </header>

      </body>
    </html>

Моя проблема в том, что для onclick="menu.open = !menu.open;" консоль браузера говорит мне, что она не определена.Это из-за <script type="module">.Но при удалении type="module" содержимое тега script выдает ошибку о том, что что-то не определено.

Поэтому мой вопрос:

Как правильно (при использовании быстрого запуска сunpkg.com - см. Начало работы ), чтобы открыть / закрыть меню в обработчике onclick?

1 Ответ

2 голосов
/ 03 мая 2019

это проблема области действия variable. В type='module' переменные автоматически не объявляются глобально, как нормальные script. Вы должны прикрепить их к объекту window вручную. Ниже оба варианта могут решить вашу проблему.

прикрепляется к окну вручную 

    <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>

Второй вариант: вместо onclick используйте addEventListener

путем добавления прослушивателя событий 

<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>

надежда помогает вам ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...