AMP：切换 CSS Class

Question

我正在生成一个 amp 模板，我有一个按钮可以切换 amp-sidebar 的可见性。代码如下：

<button class="button .closed icon" on='tap:sidebar1.toggle'></button>

边栏按预期切换。但是，我也想根据状态（打开或关闭）更改显示的图标。

我有两个 class 这样做：

• 按钮.closed（汉堡菜单图标）

• 按钮.打开（十字）

两者共享的class"icon"应该保持不变。我还想保留 'tap:sidebar1.toggle'，这样菜单仍会切换。

Answer 1

实现此目的的一种方法是使用 amp-state 来跟踪侧边栏是打开还是关闭。然后您可以使用此状态绑定按钮的 class 以相应地设置样式。

初始化放大器状态如下：

<amp-state id = "sbOpen">
    <script type = "application/json">
        false
    </script>
</amp-state>

现在按如下方式更改侧边栏代码：

<amp-sidebar

 on="sidebarOpen:AMP.setState({sbOpen});sidebarClose:AMP.setState({sbOpen})" 

最后你的按钮标签应该是这样的：

<button class="button closed icon" on='tap:sidebar1.toggle'
        [class]=" 'button icon ' + (sbOpen?'open':'closed) "></button>