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>

Full sample on JSBIN

Answer 2

使用AMP Bind const bucket = admin.storage().bucket(); return bucket.deleteFiles({ prefix: `posts/${postId}` );

还有一个特定于元素的动作

toggleClass(class=STRING, force=BOOLEAN)

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

2 个答案: