在 paper-header-panel 内切换 paper-drawer-panel

Question

我正在尝试使用纸质元素，并且尝试了一些不同的面板。我尝试修改文档中的示例：

<paper-drawer-panel>
  <paper-header-panel drawer>
    <paper-toolbar><div>Application</div></paper-toolbar>
    <div> Drawer content... </div>
  </paper-header-panel>
  <paper-header-panel main>
    <paper-toolbar>
      <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
      <div>Title</div>
    </paper-toolbar>
    <div> Main content... </div>
  </paper-header-panel>
</paper-drawer-panel>

我想在页眉面板内放置抽屉，以便页眉占满页面的整个宽度。

这是我的尝试：(plunker)

  <body class="fullbleed layout vertical">
    <paper-header-panel>
      <paper-toolbar>
        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
        <paper-icon-button icon="menu" (click)="document.querySelector('#panel').togglePanel()"></paper-icon-button>
        <div>My app</div>
      </paper-toolbar>
      <paper-drawer-panel id="panel">
        <div drawer> drawer </div>
        <div main> main </div>
      </paper-drawer-panel>
    </paper-header-panel>
  </body>

这里，抽屉没有关上。按钮什么都不做。在我的控制台中，我可以使用 $('#panel').togglePanel()，我看到它改变了面板上的 selected 属性，但抽屉没有关闭。我的代码有什么问题？如何让 "menu" 按钮关闭我的抽屉？

编辑：将 $('#panel') 替换为 document.querySelector('#panel')

Answer 1

您正在尝试使用 JQuery，这是 Javascript 的实现方式：

替换：

(click)="$('#panel').togglePanel()"

与：

onClick="document.querySelector('#panel').togglePanel()"

在 paper-header-panel 内切换 paper-drawer-panel

Toggle paper-drawer-panel inside paper-header-panel

polymer

paper-elements