Question

我有一个纸质菜单按钮，在同一页面中有一个纸张动作对话框。像那样：

＆＃13;

    function openDialog() {
        document.querySelector('#dialog').toggle();
    };

＆＃13;

<script src="//www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="//www.polymer-project.org/components/paper-dialog/paper-action-dialog.html">
<link rel="import" href="//www.polymer-project.org/components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="//www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="//www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="//www.polymer-project.org/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="//www.polymer-project.org/components/core-menu/core-menu.html">
<link rel="import" href="//www.polymer-project.org/components/paper-item/paper-item.html">
    
<paper-action-dialog id="dialog" heading="Dialog Title" backdrop>
    <p>Some content</p>
    <paper-button dismissive>More Info</paper-button>
    <paper-button affirmative>Decline</paper-button>
    <paper-button affirmative>Accept</paper-button>
</paper-action-dialog>
    
<button type="button" onclick="openDialog()">Click Me!</button>

    <br/> <br/>
    
<paper-menu-button>
    <paper-icon-button icon="menu" noink></paper-icon-button>
    <paper-dropdown class="dropdown">
        <core-menu class="menu">
            <paper-item>Share</paper-item>
            <paper-item>Settings</paper-item>
            <paper-item>Help</paper-item>
        </core-menu>
    </paper-dropdown>
</paper-menu-button>

＆＃13;

当我点击打开菜单按钮并且不要关闭它并单击按钮打开操作对话框时，菜单按钮保持打开状态。我尝试用以下方法关闭它：

document.querySelector('core-overlay-layer').opened = false;

和：

$('core-overlay-layer').removeClass('core-opened');

但核心覆盖不会以这种方式正确关闭，如果您再次尝试打开菜单按钮，第一次单击它将关闭隐藏的最后一个菜单按钮打开。在打开动作对话框之前关闭菜单按钮的正确方法是什么？

Answer 1

我在组件的文档中看到过：paper-menu-button。

overlayListeners: {
  'core-overlay-open': 'openAction',
  'core-activate': 'activateAction'
},

activateAction: function() {
  this.opened = false;
}

所以我会这样做：

    function openDialog() {
        document.querySelector('#dialog').toggle();
        document.querySelector('paper-menu-button').opened = false;
    };

打开是整个元素的属性。

聚合物：纸张操作对话框打开时，纸张菜单按钮不会关闭

1 个答案: