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>