Html AMP：切换CSS类

我正在生成一个amp模板，我有一个按钮，用于切换amp侧栏的可见性。代码如下：

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

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

我有两门课可以这样做：

• 按钮。关闭（汉堡菜单图标）

• 按钮。打开（交叉）

---

共享类“图标”在两者之间应保持不变。我还想保留“点击：侧边栏1.toggle”，这样菜单仍会切换。

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

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

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

<amp-sidebar

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

假的

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

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

<amp-sidebar

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