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

问题描述

我正在构建加速移动页面(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屋！