以编程方式更改 core-menu/core-submenu 的选择

Question

我有一个应用程序，它使用核心菜单内核心子菜单内核心项目的典型模式。这个菜单在抽屉里。我的主要内容区域是一个非常长的基于文本内容的页面。单击任何核心项目，将跳转到主要内容中的特定锚点。

我的问题是如何以编程方式控制选择哪些 core-item/core-submenus？我想实现用户将主要内容区域滚动到不同部分并且核心菜单选择根据当前可见的文本内容一致变化的模式。我可以在我的主菜单中监控滚动事件 window，但我如何更改在核心菜单中选择的项目？

Answer 1

您可以尝试 selected 属性。

以下示例将展开 收藏夹 和 select 收藏夹 3.

<core-menu selected="1">   
    <core-submenu icon="settings" label="Topics" selected="1">
        <core-item label="Topic 1"></core-item>
        <core-item label="Topic 2"></core-item>
    </core-submenu>     
    <core-submenu icon="settings" label="Favorites" selected="2">
        <core-item label="Favorite 1"></core-item>
        <core-item label="Favorite 2"></core-item>
        <core-item label="Favorite 3"></core-item>
    </core-submenu>  
</core-menu>

您可以使用 selected="{{selected}}" 或 this.$.menu.selected = '0' 等数据绑定以编程方式更新值。将此 jsbin 视为一个小演示。

以编程方式更改 core-menu/core-submenu 的选择

programmatically changing selection of core-menu/core-submenu

polymer