首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >AMP:切换CSS类的简单方法?

AMP:切换CSS类的简单方法?
EN

Stack Overflow用户
提问于 2017-07-21 21:34:23
回答 2查看 16.1K关注 0票数 15

我正在构建一个加速移动页面(AMP)模板,想知道有没有一个简单的方法来切换一个CSS类的标签。

我知道像这样的东西:

代码语言:javascript
复制
<h2 
  class="headline"
  on="tap:list.toggleVisibility"
>
<ul id="list"></ul>

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

使用像<h2 [class]="myclasses">这样的绑定的AMP.setState看起来是可行的,但是使用他们提供的工具来操纵状态是相当困难的……

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-07-22 00:16:13

这可以通过amp-bind完成。您可以使用隐式状态变量来跟踪当前状态,例如visible。下面是一个切换两个类showhide的示例

代码语言:javascript
复制
  <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

票数 30
EN

Stack Overflow用户

发布于 2019-05-09 03:36:05

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

代码语言:javascript
复制
<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>
票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45239075

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档