我正在生成一个 amp 模板,我有一个按钮可以切换 amp-sidebar 的可见性。代码如下:
<button class="button .closed icon" on='tap:sidebar1.toggle'></button>
侧边栏按预期切换。但是,我还希望根据状态(打开或关闭)更改显示的图标。
我有两个类可以这样做:
按钮.closed(汉堡菜单图标)
按钮.open(十字)
共享类“图标”在两者之间应该保持相同。我还想保留“tap:sidebar1.toggle”,这样菜单仍会切换。
最佳答案
实现此目的的一种方法是使用 amp-state 来跟踪侧边栏是打开还是关闭。然后您可以使用此状态绑定(bind)按钮的类以相应地设置样式。
像下面这样初始化一个放大器状态:
<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>
关于html - 安培 : Toggle CSS Class,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51970643/