Question

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

我正在尝试获取div的一些属性来响应核心抽屉面板是否打开/关闭。

我已经设法通过为我使用的菜单图标添加一个事件监听器来响应它，但它是我遇到问题的核心抽屉面板的关闭。

任何帮助将不胜感激！

<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之类的事件。

Answer 1

查看核心抽屉面板的来源，看起来你可以使用document.querySelector('core-drawer-panel').isMainSelected()方法获得真/假回报。 true表示面板已关闭，false表示面板已打开。

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

1 个答案: