paper-drawer-toggle 在点击后不关闭菜单

Question

我使用的是 polymer 和 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>

Answer 1

我无法让 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>

Answer 2

这是完整的解决方案：

<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();
    }
}

这是我们找到所需答案的 Polymer 文档的 link https://www.webcomponents.org/element/PolymerElements/paper-drawer-panel/paper-drawer-panel#methods

paper-drawer-toggle 在点击后不关闭菜单

paper-drawer-toggle does not close menu after clicking

html

javascript

polymer

aurelia