时间戳

首页 > 解决方案 > 如何在 AMP 页面中动态隐藏 div 容器

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

问题描述

是否有一些解决方案如何动态隐藏 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 类在初始调用中具有值“显示”，它就可以工作。但我想要的是禁用容器视图，只要按钮没有被点击......

标签： amp-htmlaccelerated-mobile-page

解决方案

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

您也可以在没有 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>

推荐阅读