检测核心抽屉面板何时关闭？答案

【问题标题】：Detect when core-drawer-panel is closed?检测核心抽屉面板何时关闭？
【发布时间】：2015-02-10 00:51:25
【问题描述】：

例如，我试图检测用户何时单击网站上的核心抽屉面板。

我正在尝试获取 div 的某些属性以响应 core-drawer-panel 是否打开/关闭。

通过为我使用的菜单图标添加事件侦听器，我设法让它在打开它时做出响应，但我遇到的问题是关闭 core-drawer-panel。

任何帮助将不胜感激！

<body fullbleed layout vertical>

<template is="auto-binding">

    <core-drawer-panel id="drawerPanel">

        <core-header-panel id="drawerCHP" drawer>

            <core-toolbar id="navheader">
                <span>My Webpage</span>
            </core-toolbar>

            <core-menu selected="0">
                <core-item icon="home" label="Home"></core-item>    
                <core-item icon="settings" label="Settings"></core-item>
                <core-item icon="help" label="Help"></core-item>
            </core-menu>
        </core-header-panel>

        <core-header-panel id="chp" main mode="seamed">
            <core-toolbar id="mainHeader">
                <paper-icon-button id="navicon" icon="menu"></paper-icon-button>
            </core-toolbar>
            <div class="content">
                <!-- Content Goes Here -->
            </div>
        </core-header-panel>
    </core-drawer-panel>

    <script>    
        document.getElementById("navicon").addEventListener("click", openDrawer);

        function openDrawer() {
            document.getElementById("drawerPanel").togglePanel();
        }
    </script>
</template>

我没有在 Polymer 应用程序中使用过 core-drawer-panel，因此我无法使用 core-responsive-change 等事件。

【问题讨论】：

通常 'core-responsive-change' 事件应该可以完成工作。显示一些代码，甚至更好地设置在线示例。这将有助于获得更好的答案。
@GoceRibeski 我添加了一些示例代码，但我没有在 Polymer 应用程序中使用 core-drawer-panel，这在尝试使用 core-responsive-change 时可能会出现问题。我试图使用 JavaScript 寻找替代方案，但没有运气？！
我认为 'narrow' 属性是关键，做了一些测试，但没有像我预期的那样工作：plnkr.co/edit/m2u3qN5URq5V3flbXVQz?p=preview

标签： javascript html polymer

【解决方案1】：

查看@ core-drawer-panel 的源代码，您似乎可以使用document.querySelector('core-drawer-panel').isMainSelected() 方法并获得真/假返回。 true 表示面板关闭，false 表示面板打开。

【讨论】：