Question

我阅读了a sample page和the document的源代码，并编写了以下代码：

<html>
    <head>
        <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    </head>
    <body>
      <div class="drawer-frame-root">
        <aside class="mdc-drawer mdc-drawer--modal" id="drawer">
          <div class="mdc-drawer__header">
            <h3 class="mdc-drawer__title">title</h3>
            <h6 class="mdc-drawer__subtitle">subtitle</h6>
          </div>
          <div class="mdc-drawer__content">
            <nav class="mdc-list" data-mdc-auto-init="MDCList">
              <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
                <span class="mdc-list-item__text">Inbox</span>
              </a>
              <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
                <span class="mdc-list-item__text">Outgoing</span>
              </a>
              <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
                <span class="mdc-list-item__text">Drafts</span>
              </a>
            </nav>
          </div>
        </aside>
        <div class="mdc-drawer-scrim"></div>

        <div class="drawer-frame-app-content">
          <header class="mdc-top-app-bar drawer-top-app-bar" data-mdc-auto-init="MDCTopAppBar" id="app-bar">
            <div class="mdc-top-app-bar__row">
              <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                <button href="#" class="material-icons mdc-top-app-bar__navigation-icon mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" data-mdc-auto-init="MDCRipple">menu</button>
                <span class="mdc-top-app-bar__title">Title</span>
              </section>
            </div>
          </header>
          <div class="drawer-main-content" id="main-content">
            <div class="mdc-top-app-bar--fixed-adjust"></div>
          </div>
        </div>
      </div>
        <!-- at the bottom of the page -->
        <script type="text/javascript">
          window.mdc.autoInit();
          const list = document.querySelector('.mdc-list').MDCList;
          list.wrapFocus = true;
          const drawer = document.getElementById('drawer');
          const topAppBar =  document.querySelector('.mdc-top-app-bar').MDCTopAppBar;
          topAppBar.setScrollTarget(document.getElementById('main-content'));
          topAppBar.listen('MDCTopAppBar:nav', () => {
            drawer.open = !drawer.open;
            console.log(drawer.open);
          });
        </script>
    </body>
</html>

如果单击导航按钮，将执行console.log(drawer.open)，您将看到输出true，false，true，false，true，...

但是，抽屉没有出现。

如何切换模式抽屉？

Answer 1

更改

const drawer = document.getElementById('drawer');

到

const drawer = new mdc.drawer.MDCDrawer(document.getElementById('drawer'));

MDC-Web：如何切换模式抽屉？

1 个答案: