点击后纸盘抽屉不会关闭菜单
问题描述:
我正在使用聚合物和aurelia,并有一个从侧面打开的菜单。但是,当我在手机中点击菜单中的项目后,它不会自动关闭。点击后纸盘抽屉不会关闭菜单
<paper-item if.bind="!authenticated" class="login" style="padding-left:10px">
<a paper-drawer-toggle href="/login" class="nav-link">
<span class="fa fa-sign-in"></span>
<span if.bind="fullmenu" class="nav-item">Login</span>
</a>
</paper-item>
答
这是完整的解决方案:
<paper-item if.bind="!authenticated" class="login" style="padding-left:10px">
<a paper-drawer-toggle href="/login" class="nav-link" click.delegate="close()">
<span class="fa fa-sign-in"></span>
<span if.bind="fullmenu" class="nav-item">Login</span>
</a>
</paper-item>
,然后这是JavaScript
close() {
if (!this.widescreen) {
let drawer = document.getElementById('drawerPanel');
drawer.closeDrawer();
}
}
这是链接到聚合物的文档,我们发现我们需要 https://www.webcomponents.org/element/PolymerElements/paper-drawer-panel/paper-drawer-panel#methods
答案
答
我不能得到paper-drawer-toggle
工作,并且不得不创建一个函数来处理它;
close() {
let drawer = document.getElementById('drawerPanel');
drawer.toggle();
return true;
}
然后,只需将该功能添加到click.trigger
;
<paper-item if.bind="!authenticated" class="login" style="padding-left:10px">
<a paper-drawer-toggle href="/login" class="nav-link">
<span class="fa fa-sign-in"></span>
<span if.bind="fullmenu" class="nav-item">Login</span>
</a>
</paper-item>
+1
这个伟大的工程。唯一的问题是,drawer.toggle()该元素没有被定义。我反而需要的是drawer.closeDrawer()和drawer.openDrawer()。当我这样做的时候,这一切都很好。 –
我已经使这一个最好的答案,因为这是实际解决问题的解决方案。 –
不客气。 – Tom