如何在 AMP 页面中动态隐藏 div 容器

Question

是否有一些关于如何动态隐藏 div 容器的解决方案？

这是我当前的实现：

<button class="button" on="tap:player.hide">hide me</button>
<button class=button" on="tap:player.show">show me</button>    
<div id="player" class="show" [class]="show||hide">some content</div>

.hide {
  display: none;
}

.show {
  display: block;
}

只要 div class 在初始调用中具有值 'show' 就可以工作。但我想要的是只要按钮没有被点击就禁用容器视图...

Answer 1

Sebastian Benz 使用 amp-bind 回答：

你也可以在没有 amp-bind 的情况下实现你的目标

Here is working url

代码

<button id="playerbutton1" class="button" hidden on="tap:player.hide,playerbutton1.hide,playerbutton2.show">hide me</button>
<button id="playerbutton2" class="button" on="tap:player.show,playerbutton2.hide,playerbutton1.show">show me</button>    
<div id="player" hidden>some content</div>

Answer 2

或使用操作和事件：link

<button on="tap:player.toggleVisibility">Toggle</button>

<div id="player" hidden>some content</div>

Working example

AMP 提示：CSS hide/show 和可见性不适用于点击事件

Answer 3

这对我来说看起来最干净。


<button on="tap:AMP.setState({openMenu: !openMenu})">Toggle</button>

<div [hidden]="openMenu">some content</div>

如何在 AMP 页面中动态隐藏 div 容器

how to hide dynamically an div container in AMP Page

amp-html

accelerated-mobile-page