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

【问题标题】：AMP: easy way to toggle a CSS class?AMP：切换 CSS 类的简单方法？
【发布时间】：2017-07-21 13:34:22
【问题描述】：

我正在构建一个 Accelerated Mobile Page (AMP) 模板，并且想知道是否有一种简单的方法可以在选项卡上切换 CSS 类。

我知道这样的事情：

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

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

AMP.setState 与 <h2 [class]="myclasses"> 之类的绑定看起来是可行的方法，但使用它们提供的工具来操纵状态非常困难......

【问题讨论】：

标签： css amp-html

【解决方案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>

Full sample on JSBIN

【讨论】：

我们有多个节目多/少怎么样？它需要为每个元素创建状态。
@nich 将变量名可见更改为可见1、可见2等

【解决方案2】：

AMP Bind toggleClass(class=STRING, force=BOOLEAN) 还有一个特定于元素的操作

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

<h2 
class="headline"
on="tap:list.toggleClass(class='my-custom-class')">
<ul id="list"></ul>

【讨论】：