Реализация переключения между элементами в AMP - PullRequest
Новая
       6

Реализация переключения между элементами в AMP

0 голосов
/ 13 ноября 2018

Как я могу показать только один элемент на событии касания?

Когда нужно щелкнуть по одному элементу, мне нужно установить значение false для других элементов.

Теперь я меняю <li> класс, когда ребенок <a> был прослушан. 

.megamenu-item .dropdpwn-links{
  display:none;
}

.megamenu-item.show .dropdpwn-links{
  display:block;
}
<ul>
  <li class="megamenu-item" [class]="megamenuSubVisible && item1.show ? 'megamenu-item show' : 'megamenu-item'">
    <a href="" on="tap:AMP.setState({megamenuSubVisible: !megamenuSubVisible , item1:{ show:true }})">open dropdown</a>
    <div class="dropdpwn-links">
      <div>item1</div>
      <div>item2</div>
      <div>item3</div>
      <div>item4</div>
    </div>
  </li>
  <li class="megamenu-item" [class]="megamenuSubVisible && item2.show ? 'megamenu-item show' : 'megamenu-item'">
    <a href="" on="tap:AMP.setState({megamenuSubVisible: !megamenuSubVisible , item2:{ show:true }})">open dropdown</a>
    <div class="dropdpwn-links">
      <div>item1</div>
      <div>item2</div>
      <div>item3</div>
      <div>item4</div>
    </div>
  </li>
  <li class="megamenu-item" [class]="megamenuSubVisible && item3.show ? 'megamenu-item show' : 'megamenu-item'">
    <a href="" on="tap:AMP.setState({megamenuSubVisible: !megamenuSubVisible , item3:{ show:true }})">open dropdown</a>
    <div class="dropdpwn-links">
      <div>item1</div>
      <div>item2</div>
      <div>item3</div>
      <div>item4</div>
    </div>
  </li>
</ul>

/ ********************************************** ********************************************** /

1 Ответ

0 голосов
/ 14 ноября 2018

Вы можете переключить родительский элемент щелчка и установить значение для других родительских элементов 

<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="final.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp-custom>
.megamenu-item .dropdpwn-links{
  display:none;
}

.megamenu-item.show .dropdpwn-links{
  display:block;
}
</style>
</head>
<body>
<ul>
  <li [class]="item1 ? 'show' : 'megamenu-item'" class="megamenu-item">
    <a href="#" tabindex="0" role="button" on="tap:AMP.setState({item1: !item1,item2:megamenu-item,item3:megamenu-item})">open dropdown</a>
    <div class="dropdpwn-links">
      <div>item1</div>
      <div>item2</div>
      <div>item3</div>
      <div>item4</div>
    </div>
  </li>
  <li [class]="item2 ? 'show' : 'megamenu-item'" class="megamenu-item">
    <a href="#" tabindex="0" role="button" on="tap:AMP.setState({item2: !item2,item1:megamenu-item,item3:megamenu-item})">open dropdown</a>
    <div class="dropdpwn-links">
      <div>item1</div>
      <div>item2</div>
      <div>item3</div>
      <div>item4</div>
    </div>
  </li>
  <li [class]="item3 ? 'show' : 'megamenu-item'" class="megamenu-item">
    <a href="#" tabindex="0" role="button" on="tap:AMP.setState({item3: !item3,item2:megamenu-item,item1:megamenu-item})">open dropdown</a>
    <div class="dropdpwn-links">
      <div>item1</div>
      <div>item2</div>
      <div>item3</div>
      <div>item4</div>
    </div>
  </li>
</ul>
</body>
</html>

Примечание: вместо тега <a> следует использовать тег <span>

...