如何在 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 类在初始调用中具有值"show"，它就有效。 但是我想要的是禁用容器视图，只要按钮没有被单击......

Answer 1

由 Sebastian Benz 用 amp-bind 回答：点击这里

您也可以在没有放大器绑定的情况下实现您的目标

这是工作网址

法典

<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

或者使用操作和事件：链接

<button on="tap:player.toggleVisibility">Toggle</button>
<div id="player" hidden>some content</div>

工作示例

AMP 提示：CSS 隐藏/显示和可见性不适用于点按事件

Answer 3

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

<button on="tap:AMP.setState({openMenu: !openMenu})">Toggle</button>
<div [hidden]="openMenu">some content</div>