在纸头面板内切换纸抽屉面板答案

【问题标题】：Toggle paper-drawer-panel inside paper-header-panel在纸头面板内切换纸抽屉面板
【发布时间】：2015-11-20 22:48:04
【问题描述】：

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

<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 属性，但抽屉没有关闭。我的代码有什么问题，如何让“菜单”按钮关闭我的抽屉？

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

【问题讨论】：

标签： polymer paper-elements

【解决方案1】：

您尝试使用 JQuery，这是 Javascript 的做法：

替换：

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

与：

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

【讨论】：

它的效果再好不过了。我用你的建议更新了 plunker。 $() 为我在控制台中工作，从聚合物或 angular2 导入，不确定
为我工作plnkr.co/edit/SRChYXQMatrsGddudofs?p=preview 只是检查您是否将其缩小到足以隐藏平局（并且您正在按下第二个按钮）
哦，有趣。我在 Chrome 48 上，但它不起作用
我已经 46 岁了，可能是金丝雀吧
啊，就是这样，我做得不够窄！嗬！非常感谢！