maquette - Maquette JS 条件 CSS

Question

我正在尝试创建一个包含应用程序级导航图标的“li”元素数组。我有一个 css 类“is-active”，它突出显示列表中的活动“li”元素，指示导航模式中的活动位置。我希望 Maquette JS 在最终用户选择适当的图标时将其呈现为“突出显示”。我正在尝试使用 classes:{} 属性：

"classes": this._activeNavElementId === navItem.id ? "nav-menu-item nav-menu-item-is-active" : "nav-menu-item", ...

显然这是不恰当的使用。本教程提供了一个示例，其中布尔值确定一个类是否在 classList 中；但是，如果为 true，我实际上需要使用 classList A，如果为 false，则需要使用 classList B。

很难找到 maquettejs 条件 css 的好例子。有什么想法吗？

score 1 · Accepted Answer

条件 CSS 类的工作方式如下：

h("li.nav-menu-item", {
  "classes": {
    "nav-menu-item-is-active": this._activeNavElementId === navItem.id
  }
}

1 回答 1