AMP：切换CSS类

Question

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

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

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

为此，我有两个课程：

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

• 按钮。打开（十字）

共享类“ icon”在两者之间应保持相同。 我还想保留“ tap：sidebar1.toggle”，以便菜单仍然可以切换。

Answer 1

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

初始化如下所示的放大器状态：

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

然后按如下所示更改边栏代码：

<amp-sidebar

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

最后，您的button标签应该是这样的：

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