AMP:切换 CSS 类的简单方法? [英] AMP: easy way to toggle a CSS class?

问题描述

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

I'm build an Accelerated Mobile Page (AMP) template and was wondering if there is an easy way of toggling a CSS class on tab.

我知道这样的事情:

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

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

But this writes inline-styles - I'd rather toggle a custom CSS class but couldn't find an example on the AMP page.

AMP.setState 带有像 <h2 [class]="myclasses"> 这样的绑定看起来是可行的方法，但是使用他们给你的工具......

AMP.setState with bindings like <h2 [class]="myclasses"> looked like the way to go but manipulating the state is pretty hard with the tools they give you ...

推荐答案

这可以通过 amp-bind.您可以使用隐式状态变量，例如visible，跟踪当前状态.这是一个切换两个类 show 和 hide 的示例:

This can be done via amp-bind. You can use an implicit state variable, e.g. visible, to track the current state. Here is a sample that toggles two classes show and 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>

JSBIN 上的完整示例

这篇关于AMP:切换 CSS 类的简单方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！