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属性，但抽屉不会关闭。我的代码有什么问题，如何制作＆＃34;菜单＆＃34;按钮关闭我的抽屉？

修改：将$('#panel')替换为document.querySelector('#panel')

Answer 1

你试图使用JQuery，这是Javascript的做法：

取代：

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

使用：

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

在纸张标题面板内切换纸抽屉面板

1 个答案: