以编程方式更改核心菜单/核心子菜单的选择

Question

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

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

Answer 1

你可以试试selected属性。

以下示例将展开Favorites并选择Favorite 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 作为一个小演示。