手动下拉菜单铁图标更改单击聚合物中的纸张菜单

Question

我正在尝试使用带有纸质子菜单的纸质菜单，这样当我打开子菜单时，标题（纸张菜单）的图标（向上箭头）会变为向下箭头。

当然，当子菜单不再可见时，我希望这会返回。

我目前正在使用此功能，但它已经从我在网上看到的内容拼凑而成。

HTML /聚合物

for (User user : users) {
                User user1 = mRealm.where(User.class).equalTo("userId", userId).findFirst();
                if (user1 != null) {
                    mRealm.insertOrUpdate(user); // update
                } else {
                    user.setUserId(userId);
                    mRealm.copyToRealm(user); // save
                }
            }

JS

<paper-submenu>
    <paper-drawer-icon-item icon="settings" class="menu-trigger">Settings<iron-icon 
    class="menu-dropdown" icon="{{_icon(expanded)}}"></iron-icon></paper-drawer-icon-item>
        <paper-drawer-item class="menu-content" style="text-align:right;">Settings info 
        </paper-drawer-item>
</paper-submenu>

感谢任何帮助。

Answer 1

您可以使用paper-submenu的属性opened来指示菜单是否已打开。正是你需要的。如下所示：

<paper-submenu opened="{{opened}}">
    <paper-drawer-icon-item icon="settings" class="menu-trigger">Settings<iron-icon 
    class="menu-dropdown" icon="{{_icon(opened)}}"></iron-icon></paper-drawer-icon-item>
        <paper-drawer-item class="menu-content" style="text-align:right;">Settings info 
        </paper-drawer-item>
</paper-submenu>

并且不要忘记在自定义元素中定义opened属性（无论你想要什么，都可以调用此属性。只需重新绑定另一个属性opened="{{ some property }}"。

opened: {
  type: Boolean,
  value: false
}

你写的js函数是好方法