AMP：切换CSS类的简单方法？

Question

我正在构建加速移动页面（AMP）模板，并且想知道是否有一种简便的方法可以切换选项卡上的CSS类。

我知道类似的东西：

<h2 
  class="headline"
  on="tap:list.toggleVisibility"
>
<ul id="list"></ul>

但这写的是内联样式-我宁愿切换自定义CSS类，但在AMP页面上找不到示例。

AMP.setState与绑定<h2 [class]="myclasses">看起来像是要走的路，但是使用它们给您的工具来操纵状态非常困难…

Answer 1

这可以通过完成amp-bind。您可以使用隐式状态变量（例如visible）来跟踪当前状态。这是切换两个类show和的示例hide：

  <button [text]="visible ? 'Show Less' : 'Show More'" 
           on="tap:AMP.setState({visible: !visible})">
    Show More
  </button>
  <p [class]="visible ? 'show' : 'hide'" class="hide">
    Some more content.
  </p>