我正在构建加速移动页面(AMP)模板,并且想知道是否有一种简便的方法可以切换选项卡上的CSS类。
我知道类似的东西:
<h2 class="headline" on="tap:list.toggleVisibility" > <ul id="list"></ul>
但这写的是内联样式-我宁愿切换自定义CSS类,但在AMP页面上找不到示例。
AMP.setState与绑定<h2 [class]="myclasses">看起来像是要走的路,但是使用它们给您的工具来操纵状态非常困难…
AMP.setState
<h2 [class]="myclasses">
这可以通过完成amp-bind。您可以使用隐式状态变量(例如visible)来跟踪当前状态。这是切换两个类show和的示例hide:
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>